javascripthtmldrop-down-menumulti-selectselectedindex

Checking selectedIndex doesn't match when selecting multiple options in select element

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-6">
    <div class="form-group">
      <select id="s1" multiple="multiple" class="form-control" name="stype"
          onchange="showfield1(this.options[this.selectedIndex].value)" required>
        <option>Diamond</option>
        <option>Ruby</option>
        <option>Sapphire</option>
        <option>Emerald</option>
        <option>Tanzanite</option>
        <option>Pink Sapphire</option>
        <option>Aqua</option>
        <option>Blue Topaz</option>
        <option>Amethyst</option>
        <option>Pearl</option>
        <option>Garnet</option>
        <option>Citrine</option>
        <option>Opal</option>
        <option>Other</option>
      </select>

      <script type="text/javascript">
        function showfield1(name) {
          if (name == 'Other') document.getElementById('div1').innerHTML =
              '<input type="text" class="form-control" name="stypeother"'
              + ' placeholder="Please Specify"/>';
          else document.getElementById('div1').innerHTML = '';
        }
      </script>
      <div id="div1"></div>

With the above code, if I select any other <option> in addition to Other then the Please Specify <input> is not displayed. That <input> is visible only when the only selected <option> is Other. I want the Please Specify <input> to be displayed anytime the Other <option> is selected, regardless of any other <option> also being selected.

I am using the the selectedIndex of the <select> to obtain the value of the selected <option> and testing to see if that value is equal to Other. But, that is not working. How do I determine if the Other <option> is selected?

Solution

  • You need to check to see if the Other <option> is selected. The selectedIndex will only return the index of the first selected <option>. Given that Other is your last <option>, selectedIndex will never be the index for Other when anything else is selected. One way to check if Other is selected is to give the Other <option> an id and then check the selected property of the Other <option>.

    <div class="row">
  <div class="col-xs-12 col-sm-6 col-md-6">
    <div class="form-group">
      <select id="s1" multiple="multiple" class="form-control" name="stype"
          onchange="showfield1()" required>
        <option>Diamond</option>
        <option>Ruby</option>
        <option>Sapphire</option>
        <option>Emerald</option>
        <option>Tanzanite</option>
        <option>Pink Sapphire</option>
        <option>Aqua</option>
        <option>Blue Topaz</option>
        <option>Amethyst</option>
        <option>Pearl</option>
        <option>Garnet</option>
        <option>Citrine</option>
        <option>Opal</option>
        <option id="optionOther">Other</option>
      </select>

      <script type="text/javascript">
        function showfield1() {
          if (document.getElementById('optionOther').selected) {
            document.getElementById('div1').innerHTML = '<input type="text"'
                + ' class="form-control" name="stypeother"'
                + ' placeholder="Please Specify"/>';
          } else {
            document.getElementById('div1').innerHTML = '';
          }
        }
      </script>
      <div id="div1"></div>