代码之家 › 专栏 › 技术社区 › gobi

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

dom-events javascript-objects html javascript

gobi · 技术社区 · 7 年前

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

2 回复 | 直到 6 年前

Gobind Deep Singh 7 年前

使用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中附加HTML,id=“input\u fields”

xianshenglu 7 年前

这是你想要的吗?

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

推荐文章

Alvaro · mouseenter委派使用vanilla JavaScript?

7 年前

dotnetCarpenter · 如何检查侦听器事件是否为被动事件?

7 年前

Teight · 我的JavaScript代码在尝试使用keydown事件处理程序更改类中的变量时遇到问题

7 年前

jcarpenter2 · DOM-同步事件的计时与setTimeout

7 年前

john Smith · 包装器div上的Javascript模糊事件

7 年前

xiaolingxiao · 导航到页面后运行javascript

7 年前

Thomas Mathews · 从字符串动态创建按钮事件监听器,而不覆盖[重复]

7 年前

blazing · 如何在Typescript中使用EventTarget

7 年前

Alexander Solonik · 即使将事件传递给调度程序,Reducer也显示未定义

7 年前

dekzok · 这似乎不是一个有效的函数。为什么?

7 年前