SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Could JS get the value of the selected <option>

    Hello,

    I have a <select> list in an html form with many <option>'s. How can I use JS to do different things with an onclick event based on the selected option from the <select> list (before the form is sent).

    For examle, suppose there is a link after that <select> element and it has an onclick event that does some actions based on the selected option from the list. So if option with value "change_link" is selected the JS would change the href attribute of the current link, if option with value "change_title" is selected the JS would change the title attribute of the current link...


    The question now is: if the form has name "form1" and the <select> element has name "list1", how can I make the JS code recognize the current selected option (its value) from the <select> list?

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Location
    Manchester, UK
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JS Selected option value

    Hi,

    To get you started here's a script that will retrieve the selected option index of the select tag.

    Code HTML4Strict:
    <html>
        <head>
            <title>Listbox Selected Index Example</title>
            <script type="text/javascript">
                function showSelectedIndex() {
                    var oListbox = document.getElementById("selListbox");
                    alert(oListbox.selectedIndex);
                }
            </script>
        </head>
        <body>
            <form>
                <select id="selListbox" size="5">
                     <option>Original Value 0</option>
                     <option>Original Value 1</option>
                     <option>Original Value 2</option>
                     <option>Original Value 3</option>
                     <option>Original Value 4</option>
                </select><br />
                Select an option in the listbox and click "Show Selected Index".<br />
                <input type="button" value="Show Selected Index" onclick="showSelectedIndex()" />
           </form>
        </body>
    </html>

    Furthermore heres's a javascriot object that defines some useful list functions. Taken from Professional Javascript Book (WROX).

    Code JavaScript:
    var ListUtil = new Object();
     
    ListUtil.getSelectedIndexes = function (oListbox) {
        var arrIndexes = new Array;
     
        for (var i=0; i < oListbox.options.length; i++) {
            if (oListbox.options[i].selected) {
                arrIndexes.push(i);
            }
        }
     
        return arrIndexes;
    };
     
    ListUtil.add = function (oListbox, sName, sValue) {
     
        var oOption = document.createElement("option");
        oOption.appendChild(document.createTextNode(sName));
     
        if (arguments.length == 3) {
            oOption.setAttribute("value", sValue);
        }
     
        oListbox.appendChild(oOption);
     
    }
     
    ListUtil.remove = function (oListbox, iIndex) {
        oListbox.remove(iIndex);
    };
     
    ListUtil.clear = function (oListbox) {
        for (var i=oListbox.options.length-1; i >= 0; i--) {
            ListUtil.remove(oListbox, i);
        }
    };
     
    ListUtil.move = function (oListboxFrom, oListboxTo, iIndex) {
        var oOption = oListboxFrom.options[iIndex];
     
        if (oOption != null) {
            oListboxTo.appendChild(oOption);
        }
    };
     
    ListUtil.shiftUp = function (oListbox, iIndex) {
        if (iIndex > 0) {    
            var oOption = oListbox.options[iIndex];
            var oPrevOption = oListbox.options[iIndex-1];
            oListbox.insertBefore(oOption, oPrevOption);
        }    
    };
     
    ListUtil.shiftDown = function (oListbox, iIndex) {
        if (iIndex < oListbox.options.length - 1) {
            var oOption = oListbox.options[iIndex];
            var oNextOption = oListbox.options[iIndex+1];
            oListbox.insertBefore(oNextOption, oOption);
        }
    };

    thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •