Form Fields: Drop Down Lists


  • To get the index of the selected item in a drop down list:
    var selectedIndex = document.getElementById(selectboxID).selectedIndex;
  • To get the text of the selected item in a drop down list:
    var selectedText = document.getElementById(selectboxID)[selectedIndex].text;

  • To get the text of the selected value in a drop down list:
    var selectedValue = document.getElementById(selectboxID)[selectedIndex].value;

  • To add an item to a drop down list first declare a new Option (a list item) with information for the text property and the value property.

    var newOpt = new Option("Item 1 Text", "Item 1 Value");

    Then add that option to the drop down list:

    document.getElementById(selectboxID).options.add(newOpt);

  • To declare a drop down list in html

    <!-- unpopulated -->
    <select id="classList" size="4"></select>


    or

    <!-- populated -->
    <select multiple id="classList" size="4">
    <option value="CIS120" selected>CIS120</option>
    <option value="CIS301">CIS301</option>
    <option value="CIS302" >CIS302</option>
    <option value="CIS285" >CIS285</option>
    </select>