Rijo Rijo - 19 days ago 7
Javascript Question

How can assign multiple selected values to the text field using jquery

I want to assign the multiple selected values to the different text field. If i selected four option assign values to the four different text field.

Html code

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


What i did sample jquery code

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

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


Please anybody help this. Thanks for your corporation

Answer

Generate id value based on the selected options index(you can get index value as the first argument of the callback function in each() method) and update its value by selecting element using the generated id.

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


The much better approach would be using common class for inputs and you can get element by index using :eq() pseudo-class selector in jQuery.

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


UPDATE : For limiting the number of selection always cache selected value in a global variable and restore when selected option count is greater than expected.

<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>
  var sel;
  $("select").change(function() {
      var str = "",
        $selected = $("select option:selected");

      if ($selected.length > 4)
        $(this).val(sel);
      else
        sel = $(this).val();

      $selected.each(function(i) {
        str += $(this).text() + " ";
        $('.opt:eq(' + i + ')').val($(this).text());
      });
      $("div").text(str);
    })
    .trigger("change");
</script>

Refer : Multiple Select limit number of selection