How to set multiple select values from string using Jquery

Question

I have a span Id with some values that correspond to values in multiple select box items. I want to take the values from span Id and select the corresponding items in list.

<span id="test">
  1,4
</span>
<select id='multipleSelect' multiple='multiple'>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

I can read the string into array but not sure how to use array to select items in multiple Select box

var test = $("#test").text();
var testArray = test.split(',');

I guess if the values are known then it is easy to do something like this

$('#multipleSelect').val(['1', '2']);

Here is JS fiddle to illustrate the idea so far https://jsfiddle.net/deu8ftpb/1/

You were very close to solution $('#multipleSelect').val($("#test").text().trim().split(',')); jsfiddle.net/8621wujp — Satpal
– Satpal, Commented Sep 28, 2016 at 12:36

Rakesh Sojitra · Accepted Answer · 2016-09-28 12:47:51Z

4

try this code. You just missing trim() that texts and put splitted array as val()

var test = $.trim($("#test").text());
var testArray = test.split(',');
$('#multipleSelect').val(testArray);

edited Sep 28, 2016 at 12:47

answered Sep 28, 2016 at 12:37

Rakesh Sojitra

3,6682 gold badges19 silver badges35 bronze badges

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

2 Comments

jas Over a year ago

$.trim only removed the space around the first string. It works fine after using replace(/\s/g, "")

Rakesh Sojitra Over a year ago

The $.trim() function removes all newlines, spaces (including non-breaking spaces), and tabs from the beginning and end of the supplied string. Refer api.jquery.com/jQuery.trim

TheWandererr · Accepted Answer · 2016-09-28 12:37:56Z

0

You did everything right. You only forgot to set the val for the select. Like so: $('#multipleSelect').val(testArray);

answered Sep 28, 2016 at 12:37

TheWandererr

5062 gold badges9 silver badges34 bronze badges

Comments

ronkpunk · Accepted Answer · 2019-03-05 11:33:10Z

0

maybe a bit late.

You have to trim value in array.

In your case, I resolved using .map and trimming values

var test = $.trim($("#test").text());
var testArray = test.split(',');
var testArray = testArray.map(function(item){ return item.trim(); });
$('#multipleSelect').val(testArray);

I had a similar case but my "testArray" was an integer array (instead of strings like your testArray was). In my case I had to use .map for converting value from integer to strings.

answered Mar 5, 2019 at 11:33

ronkpunk

112 bronze badges

Collectives™ on Stack Overflow

How to set multiple select values from string using Jquery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related