在下拉列表中选择多个选项时如何生成动态文本框？答案

【问题标题】：How to generate dynamic text box when selecting multiple options in drop down?在下拉列表中选择多个选项时如何生成动态文本框？
【发布时间】：2017-04-12 00:18:02
【问题描述】：

我有下拉选项，如果我们选择“其他”选项，则会出现“其他”选项，动态文本框将出现。但我的问题是，它是多选下拉菜单。如果您选择“其他”和该下拉菜单中的另一个选项，文本框即将到来。如果您选择“其他”选项和任何其他选项，如何获取该文本框...

function showfield(name) {
    if (name == 'others') {
        document.getElementById('div1').innerHTML =
            '<input type="text"  id="others" name="others" autocomplete="off" />';	  
    }
    else {
        document.getElementById('div1').innerHTML ='';
    } 
}

<td>
    <select class="outcomes" id="outcomes" name="keyOutcomes" 
            multiple="multiple" style="width: 310px;"
            onchange="showfield(this.options[this.selectedIndex].value)">
       <option value="Revenue-top-line">Revenue top-line</option>
       <option value="Margin">Margin(CTS/Client)</option>
       <option value="Cashflows">Cashflow improvement</option>
       <option value="Custome">Customer experience/CSAT</option>
       <option value="Demand">Demand Elimination</option>
       <option value="Risk">Risk Reduction</option>
       <option value="Regulatory_compliance">Regulatory compliance</option>
       <option value="others">Others</option>
   </select>
   <span id="outcomeaddress" style="margin-top: 29px; margin-left: 275px; color: red;"></span>
   <div id="div1"></div>
</td>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

首先你已经添加了 jquery 标签，但你没有在你的问题中使用它，所以我假设你不会介意答案是否包含 jquery：

这是一个工作代码（经过测试），如果选择了其他代码，无论有没有其他选项，都会显示输入：

$("#outcomes").change(function() {
    var selected = $(this).val(); //array of the selected values in drop box

  for(var i=0; i < selected.length; i++) {
    if (selected[i] == "others") {
        $("#div1").html('<input type="text"  id="others" name="others" autocomplete="off" />');
    } else {
        $("#div1").html("");
    }
  }
});

它所做的只是获取所有被选中的值（select var），循环遍历它们以检查其他是否是被选中的值之一，如果是则显示输入，如果不是则不显示。

另外别忘了去掉html中的onchange：

<select class="outcomes" id="outcomes" name="keyOutcomes" multiple="multiple" style="width: 310px;">
    <option value="Revenue-top-line">Revenue top-line</option>
    <option value="Margin">Margin(CTS/Client)</option>
    <option value="Cashflows">Cashflow improvement</option>
    <option value="Custome">Customer experience/CSAT</option>
    <option value="Demand">Demand Elimination</option>
    <option value="Risk">Risk Reduction</option>
    <option value="Regulatory_compliance">Regulatory compliance</option>
    <option value="others">Others</option>
</select> <span id="outcomeaddress" style="margin-top: 29px; margin-left: 275px; color: red;"></span>
<div id="div1"></div

编辑：这是有效的，因为“其他”是最后一个选项，因此每次选择某些内容时它都会检查它，即使“其他”不是最后一个选项，这里也是一个代码：

$("#outcomes").change(function() {
    var selected = $(this).val(); //array of the selected values in drop box
    var isSelected = false;

  for(var i=0; i < selected.length; i++) {
    if (selected[i] == "others") {
        isSelected = true;
    }
  }

  if (isSelected) {
    $("#div1").html('<input type="text"  id="others" name="others" autocomplete="off" />');
  } else {
    $("#div1").html('');
  }
});

【讨论】：