Question

我最后选择了其他选项＆＃39;其他人＆＃39;如果我们选择＆＃39;其他人，那就有选择权。将出现选项动态文本框。但在我的问题是，它是多选下拉列表。如果您选择其他人＆＃39;在该下拉列表中还有另一个选项，文本框即将到来。如果您选择“其他人”，则会显示该文本框。选项和任何其他选项......

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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("");
    }
  }
});

所有这一切都是取所有选中的值（选择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

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

$("#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('');
  }
});

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

1 个答案: