Question

我需要两个下拉菜单，当从任一菜单中选择＆＃34;其他时，会出现一个文本框，允许用户输入他们的答案。

我可以创建两个下拉菜单，并且可以让其中一个打开文本框，但我似乎无法完成同样的操作。我尝试了很多选项，无法让它发挥作用。任何人都可以帮忙。

谢谢

<html>
<head>

<script type="text/javascript">
window.onload = function() {
    var eSelect = document.getElementById('association');
    var optOtherReason = document.getElementById('association_detail');
    eSelect.onchange = function() {
        if(eSelect.selectedIndex === 5) {
            optOtherReason.style.display = 'block';
        } else {
            optOtherReason.style.display = 'none';
        }
    }
}
</script>
</head>
<body>
<p> 
     <label>Stakeholder association (How you are affiliated with EMWIN):</label>
     <select id = "association" name="association" >
     <option value="na">Select:</option>
     <option value="AR">Academic Research</option>
     <option value="EM">Emergency Management</option>
     <option value="EV">Equipment Vender</option>
     <option value="RB">Re-broadcast</option>
     <option value="Other">Other</option>
     </select>

     </p>
     <div id="association_detail" style="display: none;">
     <input id="namesignup" name="namesignup" required="required" type="text" placeholder="How you are affiliated with EMWIN" />
     </div>

     <p> 
     <label>Stakeholder association (How you are affiliated with EMWIN):</label>
     <select id = "select_use" name="select_use"  >
     <option value="na">Select:</option>
     <option value="sat">Satellite</option>
     <option value="int">Internet</option>
     <option value="vhf">VHF Radio Rebroadcast</option>
     <option value="Other">Other</option>
     </select>
     </p>
     <div id="Use" style="display: none;">

     <input id="namesignup" name="namesignup" required="required" type="text" placeholder="How you are affiliated with EMWIN" />
    </div>
    </body>
    </html>

Answer 1

我发现了一些问题：

你的＆＃34;其他＆＃34;文本框都具有相同的ID /名称;这不符合HTML标准。您需要确保每个元素都有唯一的ID。
您只是在听eSelect次更改;如果您还想切换Use div的可见性，那么您需要在select-use更改时进行监听（即您需要构建另一个处理程序）。

Answer 2

您需要获取第二个选择框（id =“select_use”）并为其添加另一个onchange处理程序。在第二个onchange处理程序中，您需要选择第二个文本框（id =“use”）来显示/隐藏它。

以下是您的代码的更新版本：

    var eSelect = document.getElementById('association');
    var eSelect2 = document.getElementById('select_use');
    var optOtherReason = document.getElementById('association_detail');
    var optOtherReason2 = document.getElementById('Use');

    eSelect.onchange = function() {
      if(this.options[this.selectedIndex].value === 'Other') {
        optOtherReason.style.display = 'block';
      } else {
        optOtherReason.style.display = 'none';
      }
    }
    eSelect2.onchange = function() {
      if(this.options[this.selectedIndex].value === 'Other') {
        optOtherReason2.style.display = 'block';
      } else {
        optOtherReason2.style.display = 'none';
      }
    }

在此处试试：https://jsfiddle.net/ve9fg0tc/2/

同样在你的onchange处理程序中，最好根据所选值（“其他”）而不是索引来显示/隐藏文本框。这是因为您将来可能会在菜单中添加/删除更多项目，因此索引将会更改，条件将不再起作用。

两个下拉菜单＆＃34;其他＆＃34;在下拉列表中选中，打开文本框

2 个答案: