Javascript 如何在从多选下拉列表中选择选项值时动态生成文本框_Javascript_Jquery_Html_Multi Select

Javascript 如何在从多选下拉列表中选择选项值时动态生成文本框

javascript jquery html

Javascript 如何在从多选下拉列表中选择选项值时动态生成文本框,javascript,jquery,html,multi-select,Javascript,Jquery,Html,Multi Select,我有一个多选下拉列表，用户从中选择多个项目在选择选项值的基础上，动态文本框应以相同的形式生成选择单个选项时，应生成3个文本框。第一个文本框，显示所选选项的值第二个文本框，显示所选选项的文本第三个文本框显示null <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body ali

我有一个多选下拉列表，用户从中选择多个项目

在选择选项值的基础上，动态文本框应以相同的形式生成

选择单个选项时，应生成3个文本框。第一个文本框，显示所选选项的值第二个文本框，显示所选选项的文本第三个文本框显示null

<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  </head>
  <body align="center">
    <input type="text" value="some text"/>
    <select id="multiple" multiple="multiple" style="width: 120px;height: 120px;">
      <option value="1" >Ashutosh</option>option value="6">Jems Bond</option>
      <option value="7">Danial Crack</option> option value="8">Dan Brown</option>
      <option value="9">Angilina Jolly</option>
    </select>
    <script>
      function displayVals() { 
        var multipleValues = $("#multiple").val() || [];
        $("input").val(multipleValues);
      }
      $("select").change(displayVals);displayVals();
    </script>
  </body>
</html>

在这里，我为您的问题提供了完整的解决方案。请检查演示链接，如下所示：

演示

HTML

演示

您是否考虑过将问题格式化？看，长官，它没有形成。你能把它格式化吗。它应该看起来像密码。是的，我读过。现在我明白了。谢谢，我已经用新行格式化了，如果这是你的HTML的直接副本/过去，就会有错误，比如缺少@freefaller耶，耶。我记得，先生，你是个很有才华的人。谢谢你，先生。正是我想要的。我有一个新的疑问。我想只有你能解决我的问题。请单击此链接->>

<form id="frm">
  <select id="multiple" multiple="multiple" style="width: 120px;height: 120px;">
    <option value="1" >
      Ashutosh
    </option>
    <option value="6">
      Jems Bond
    </option>
    <option value="7">
      Danial Crack
    </option>
    <option value="8">
      Dan Brown
    </option>
    <option value="9">
      Angilina Jolly
    </option>
  </select>
  <div id="result">
  </div>
</form>

$(function() {
    $("#multiple").change(function() {
        var multipleValues = $("#multiple").val() || "";
        var result = "";
        if (multipleValues != "") {
            var aVal = multipleValues.toString().split(",");
            $.each(aVal, function(i, value) {
                result += "<div>";
                result += "<input type='text' name='opval" + (parseInt(i) + 1) + "' value='" + value.trim() + "'>";
                result += "<input type='text' name='optext" + (parseInt(i) + 1) + "' value='" + $("#multiple").find("option[value=" + value + "]").text().trim() + "'>";
                result += "<input type='text' name='option" + (parseInt(i) + 1) + "' value=''>";
                result += "</div>";
            });


        }
        //Set Result
        $("#result").html(result);

    });
});

#multiple{
  margin-bottom:10px;
  border:1px solid #333;
  background:#efefef;
  color:#000;
}
#result input{
  margin-left:5px;
  border:1px solid #333;
  background:#a4c4f4;
  margin-top:5px;
}