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

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

dom-events javascript-objects html javascript

0

gobi · 技术社区 · 8 年前

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

1

2

Gobind Deep Singh 8 年前

使用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”

2

1

xianshenglu 8 年前

这是你想要的吗?

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