Javascript 两个下拉菜单'；“什么时候？”；其他"；在任一下拉列表中选择打开文本框_Javascript_Html_Drop Down Menu

Javascript 两个下拉菜单'；“什么时候？”；其他"；在任一下拉列表中选择打开文本框

javascript html drop-down-menu

Javascript 两个下拉菜单'；“什么时候？”；其他"；在任一下拉列表中选择打开文本框,javascript,html,drop-down-menu,Javascript,Html,Drop Down Menu,我需要两个下拉菜单，当从任一菜单中选择“other”时，会出现一个文本框，允许用户键入答案我可以创建两个下拉菜单，并可以让其中一个打开文本框，但我似乎无法让两个菜单都完成相同的操作。我尝试了许多选项，但都无法使其工作。请任何人提供帮助多谢各位 <html> <head> <script type="text/javascript"> window.onload = function() { var eSelect = document.getEl

我需要两个下拉菜单，当从任一菜单中选择“other”时，会出现一个文本框，允许用户键入答案

我可以创建两个下拉菜单，并可以让其中一个打开文本框，但我似乎无法让两个菜单都完成相同的操作。我尝试了许多选项，但都无法使其工作。请任何人提供帮助

多谢各位

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


window.onload=函数（）{
var eSelect=document.getElementById（'association'）；
var optOtherReason=document.getElementById（'association_detail'）；
eSelect.onchange=函数（）{
如果（eSelect.selectedIndex==5）{
optOtherReason.style.display='block'；
}否则{
optOtherReason.style.display='none'；
}
}
}

利益相关者协会（您与EMWIN的关系）：
选择：
学术研究
应急处理
设备供应商
重播
其他


利益相关者协会（您与EMWIN的关系）：
选择：
卫星
互联网
甚高频无线电转播
其他

我注意到了几个问题：

您的“其他”文本框都具有相同的id/名称；这不符合HTML标准。您需要确保每个元素具有唯一的id

您只需收听

eSelect

更改；如果您还想切换

Use

div的可见性，则需要收听

选择Use

更改时的内容（即您需要构建另一个处理程序）

您需要获取第二个选择框（id=“select\u 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=函数（）{
if（this.options[this.selectedIndex].value=='Other'）{
optOtherReason.style.display='block'；
}否则{
optOtherReason.style.display='none'；
}
}
eSelect2.onchange=函数（）{
if（this.options[this.selectedIndex].value=='Other'）{
optOtherReason2.style.display='block'；
}否则{
optOtherReason2.style.display='none'；
}
}

请在此处尝试：

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

我有过，但它不起作用，所以我没有添加它。我多次更改第二个，我不确定什么是正确的。你做得非常好，我整个上午都在坚持这一点ing。现在只学习如何做数据库工作……非常感谢，我收到了！我真的很感激！不客气，很高兴我能帮忙！这是我第一次回答stackoverflow！