Question

我想将多个选定的值分配给不同的文本字段。如果我为四个不同的文本字段选择了四个选项分配值。

Html代码

<select name="garden" multiple="multiple">
  <option>Flowers</option>
  <option>Shrubs</option>
  <option>Trees</option>
  <option>Bushes</option>
  <option>Grass</option>
  <option>Dirt</option>
</select>
<div></div>
<input type="text" id="opt1" />
<input type="text" id="opt2"/>
<input type="text" id="opt3" />
<input type="text" id="opt4" />

我做了什么样本jquery代码

<script>
$( "select" )
  .change(function() {
    var str = "";
    $( "select option:selected" ).each(function() {
      str += $( this ).text() + " ";
    });
    $( "div" ).text( str );  

    });
  })
  .trigger( "change" );
</script>

请有人帮忙。谢谢你的公司

Answer 1

根据所选的选项索引生成id值（您可以在each()方法中获取索引值作为回调函数的第一个参数），并通过使用生成的{{选择元素来更新其值1}}。

＆＃13;

id

＆＃13;

更好的方法是使用公共<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="garden" multiple="multiple"> <option>Flowers</option> <option>Shrubs</option> <option>Trees</option> <option>Bushes</option> <option>Grass</option> <option>Dirt</option> </select> <div></div> <input type="text" id="opt1" /> <input type="text" id="opt2" /> <input type="text" id="opt3" /> <input type="text" id="opt4" /> <script> $("select").change(function() { var str = ""; $("select option:selected").each(function(i) { str += $(this).text() + " "; $('#opt' + (i + 1)).val($(this).text()); }); $("div").text(str); }) .trigger("change"); </script>作为输入，你可以使用jQuery中的:eq()伪类选择器逐个索引。

＆＃13;

class

＆＃13;

更新：为了限制选择的数量，请始终在全局变量中缓存选定的值，并在选择的选项计数大于预期时进行恢复。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="garden" multiple="multiple">
  <option>Flowers</option>
  <option>Shrubs</option>
  <option>Trees</option>
  <option>Bushes</option>
  <option>Grass</option>
  <option>Dirt</option>
</select>
<div></div>
<input type="text" class="opt" />
<input type="text" class="opt" />
<input type="text" class="opt" />
<input type="text" class="opt" />

<script>
  $("select").change(function() {
      var str = "";
      $("select option:selected").each(function(i) {
        str += $(this).text() + " ";
        $('.opt:eq(' + i + ')').val($(this).text());
      });
      $("div").text(str);
    })
    .trigger("change");
</script>

＆＃13;

参考：Multiple Select limit number of selection

Answer 2

解决方案是，

在Jquery中使用trigger

Working Demo

 $("select option:selected").each(function(i) {
   if(i <= 4) {
      resVal += $(this).text() + " ";
      $('#opt' + (i + 1)).val($(this).text());
    }
  });

  $("div").text(resVal);

Answer 3

尝试。每次选择使用不同的文本框分配时。增加每次点击的计数器。它将与文本框的ids匹配

＆＃13;

var count=1;
$( "select" ).change(function() {
    var str = "";
    $( "select" ).each(function() {
      str += $( this ).val() + " ";
    });
      $( "div" ).text( str );  

       $('#opt'+count).val(str);
  count ++;
       
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="garden" multiple="multiple">
  <option>Flowers</option>
  <option>Shrubs</option>
  <option>Trees</option>
  <option>Bushes</option>
  <option>Grass</option>
  <option>Dirt</option>
</select>
<div></div>
<input type="text" id="opt1" />
<input type="text" id="opt2"/>
<input type="text" id="opt3" />
<input type="text" id="opt4" />

＆＃13;

如何使用jquery将多个选定值分配给文本字段

3 个答案: