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 do

Solution 1:

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 boxfor(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.

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

<selectclass="outcomes"id="outcomes"name="keyOutcomes"multiple="multiple"style="width: 310px;"><optionvalue="Revenue-top-line">Revenue top-line</option><optionvalue="Margin">Margin(CTS/Client)</option><optionvalue="Cashflows">Cashflow improvement</option><optionvalue="Custome">Customer experience/CSAT</option><optionvalue="Demand">Demand Elimination</option><optionvalue="Risk">Risk Reduction</option><optionvalue="Regulatory_compliance">Regulatory compliance</option><optionvalue="others">Others</option></select><spanid="outcomeaddress"style="margin-top: 29px; margin-left: 275px; color: red;"></span><divid="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 boxvar 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('');
  }
});