当我点击多个列表框动态文本框时必须生成Javascript答案

【问题标题】：When I click multiple listbox dynamic textbox must be generated Javascript当我点击多个列表框动态文本框时必须生成Javascript
【发布时间】：2018-02-05 07:08:28
【问题描述】：

这里我有多个列表框，当我点击一个选项时，动态文本框应该生成 Javascript。

<html>
 <head>
  <script type="text/javascript">

   function changeFunc() {
    var selectBox = document.getElementById("selectBox");
    var selectedValue = selectBox.options[selectBox.selectedIndex].value;
    alert(selectedValue);
   }

  </script>
 </head>
 <body>
  <select id="selectBox" multiple onchange="changeFunc();">
   <option value="1">Option #1</option>
   <option value="2">Option #2</option>
  </select>
 </body>
</html>

【问题讨论】：

dynamic textbox must be generated在哪里生成呢？
在列表框下，每次点击列表框都要创建文本框

标签： javascript html javascript-objects dom-events

【解决方案1】：

使用 JS Core 的解决方案：

function changeFunc() {
    var selectBox = document.getElementById("selectBox");
    var input = document.createElement('input');
    input.value = selectBox.options[selectBox.selectedIndex].value;
    input.type = text;
    document.getElementbyId('input_fields').appendChild(input);
}

将以下 div 添加到您的正文中

<div id="input_fields"></div>

如果使用 jQuery，解决方案会变得容易得多：

function changeFunc() {
    $("#input_fields").append("<input type='text' value='"+$("#selectBox").val()+"'>");
}

这只会在 div 中添加 id="input_fields" 的 HTML

【讨论】：

【解决方案2】：

这是你想要的吗？

<html>

<head>
    <script type="text/javascript">
    function changeFunc() {
        var selectBox = document.getElementById("selectBox");
        var selectedValue = selectBox.options[selectBox.selectedIndex].value;
        var textP = document.createElement('p');
        textP.innerHTML = selectedValue;
        document.body.appendChild(textP);
    }
    </script>
</head>

<body>
    <select id="selectBox" multiple onchange="changeFunc();">
        <option value="1">Option #1</option>
        <option value="2">Option #2</option>
    </select>
</body>

</html>

【讨论】：