javascript - 当我单击多个列表框时,必须生成 Javascript 动态文本框

标签 javascript html javascript-objects dom-events

这里我有多个列表框,当我单击一个选项时,应该生成 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>

最佳答案

使用 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()+"'>");
}

这将简单地将 HTML 附加到带有 id="input_fields"的 div 中

关于javascript - 当我单击多个列表框时,必须生成 Javascript 动态文本框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48617396/

相关文章:

javascript - 下拉菜单上的 jquery 超时(悬停意图)

javascript - 如何将 HTML SELECT 元素值设置为 php 变量 ONSELECT

javascript - HTML Doctype 导致视频自动播放而不滚动到

javascript - 在对象数组中转换对象数组

javascript - 如何访问订阅 channel 的人员列表?

javascript - 过滤对象键和值

javascript - 在 React Native 中构建应用程序后出现空白屏幕

javascript - 在 Angular 中禁用动态生成字段的输入

php - 当同一页面上有两个相同的 Jquery 时发生冲突

html 表格 - 按行或列