드롭 다운에서 여러 옵션을 선택할 때 동적 텍스트 상자를 생성하는 방법은 무엇입니까?

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

편집 : 이것은 "others"가 마지막 옵션이기 때문에 작동하므로 무언가를 선택할 때마다 마지막으로 확인합니다. "others"가 마지막 옵션이 아닌 경우에도 여기에 코드가 있습니다.

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