在select元素

Question

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

使用上述代码，如果我选择除<option>之外的任何其他Other，则不会显示Please Specify <input>。只有当选定的<input>为<option>时，Other才可见。我希望只要选择Please Specify <input>，就会显示Other <option>，而不管其他<option>是否也被选中。

我正在使用selectedIndex的{​​{1}}获取所选<select>的{​​{1}}并进行测试，以确定value是否等于<option> value。但是，这不起作用。如何确定是否已选择Other Other？

Answer 1

您需要检查是否已选择Other <option>。 selectedIndex只会返回第一个选定<option>的索引。鉴于Other是您的最后一个<option>，selectedIndex将永远不会成为Other的索引。检查选择Other的一种方法是给Other <option> id，然后检查selected {Other属性{1}}。

<option>

Answer 2

您可以在Javascript中使用多选元素的 selectedOptions 属性。

请参阅以下代码并将其替换为您的JavaScript代码。

function showfield1(){
s1 = document.getElementById('s1');
var found = 0;
for ( var i = 0; i < s1.selectedOptions.length; i++) {
    if(s1.selectedOptions[i].value=='Other')
      found =1;

}

if(found)document.getElementById('div1').innerHTML='<input type="text" class="form-control" name="stypeother" placeholder="Please Specify"/>';
else document.getElementById('div1').innerHTML='';
}

下面是完整的小提琴..检查这个

＆＃13;

＆＃13;

<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>Other</option>
      </select>

      <script type="text/javascript">
        function showfield1(){
        s1 = document.getElementById('s1');
        var found = 0;
        for ( var i = 0; i < s1.selectedOptions.length; i++) {
           if(s1.selectedOptions[i].value=='Other')
           found =1;
        }

        if(found)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>

＆＃13;

＆＃13;

＆＃13;