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

Question

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

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 19, 2016 at 6:44

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Pranav C Balan Over a year ago

@Rijo : glad to help :)

Vikrant Over a year ago

@Rijo , If its proper solution.. you can mark it as Accepted answer.

Rijo Over a year ago

one more help how can I limit maximum four selection

Rijo Over a year ago

Thanks for your great help

prasanth · Accepted Answer · 2016-11-19 06:54:22Z

1

Try like .Each time you select assign with different textbox . Increment the counter of each time click.It will match with the ids of textbox

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

       $('#opt'+count).val(str);
  count ++;
       
    });

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

edited Nov 19, 2016 at 6:54

answered Nov 19, 2016 at 6:51

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

2 Comments

Rijo Over a year ago

This answer is also fine :)

prasanth Over a year ago

Its only allow the 4 select .check the answer @Rijo

Vikrant · Accepted Answer · 2016-11-19 07:05:37Z

1

The solution is as,

using trigger in Jquery

Working Demo

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

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

edited Nov 19, 2016 at 7:05

answered Nov 19, 2016 at 6:49

Vikrant

5,05218 gold badges53 silver badges77 bronze badges

1 Comment

Rijo Over a year ago

When I deselect how to reset all text field again

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related