当我点击multipe列表框动态文本框必须生成javascript

时间:2018-02-05 07:08:28

标签: javascript html javascript-events javascript-objects

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

答案 0 :(得分:2)

使用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附加到id =“input_fields”

答案 1 :(得分:1)

这是你想要的吗?

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

相关问题