在下拉列表中选择多个选项时，如何生成动态文本框? [英] How to generate dynamic text box when selecting multiple options in drop down?

问题描述

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

I have drop-down with options at the end 'others' option is there if we select the 'others' option dynamically text box will appear.but in my problem is, it is multi-select drop down.if you select 'others' and one more option in that drop-down,the text-box is coming.how to get that text-box if you select 'others' option and any other option...

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>

推荐答案

首先，您已经添加了jquery标记，但是您没有在问题中使用它，所以我假设您不会介意答案将包含jquery:

Well first of all you have added the jquery tag but you don't use it in your question, so i will assume you won't mind if the answer will include jquery:

这是一个工作代码(经过测试)，如果选择了其他代码，则显示或不显示其他选项:

This is a working code (tested) that if others is selected, with or without other options the input is shown:

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

它所做的就是获取所有选定的值(选择变量)，循环遍历它们以检查其他值是否为选定值之一，如果是，则显示输入，如果不显示，则不显示.

All it does is taking all the values that is selected (select var), loop over them to check if others is one of the selected, if yes then show the input, if no don't show.

也不要忘记删除html中的onchange:

Also don't forget to remove the onchange in the html:

<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

编辑:之所以有效，是因为其他"是最后一个选项，因此每次选择某项时它都会最后检查一次，即使其他"不是最后一个选项，这也是一个代码:

EDIT: This is working because "others" is the last options, so it checks it last every time you select something, here is a code even if "others" is not last option:

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

这篇关于在下拉列表中选择多个选项时，如何生成动态文本框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！