Javascript/jQuery: Set Values (Selection) in a multiple Select

Question

I have a multiple select:

<select name='strings' id="strings" multiple style="width:100px;">
    <option value="Test">Test</option>
    <option value="Prof">Prof</option>
    <option value="Live">Live</option>
    <option value="Off">Off</option>
    <option value="On">On</option>
</select>

I load data from my database. Then I have a string like this:

var values="Test,Prof,Off";

How can I set this Values in the multiple select? Already tried change the string in an array and put it as value in the multiple, but doesnt work...! Can someone help me with this? THANKS!!!

all these examples just work for the hard-coded values given above, never work with real field values from the database. As soon as u replace values with database say for example : values = $('#<%=hfroles.ClientID %>').val();it does not work , it selects only the first value of the dropdown . And instead of giving the correct answer if I write the truth stack overflow deletes my view. — Zeldalink
– Zeldalink, Commented Apr 18, 2021 at 2:43

Kevin Bowersox · Accepted Answer · 2013-05-16 09:02:57Z

170

Iterate through the loop using the value in a dynamic selector that utilizes the attribute selector.

var values="Test,Prof,Off";
$.each(values.split(","), function(i,e){
    $("#strings option[value='" + e + "']").prop("selected", true);
});

Working Example http://jsfiddle.net/McddQ/1/

edited May 16, 2013 at 9:02

answered May 16, 2013 at 8:53

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

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

3 Comments

Zwen2012 Over a year ago

Thats cool, but how do you say that the selected vlaues should be selected in the "multiple select" with the id=string?

Kevin Bowersox Over a year ago

@user1824136 Excellent, Glad I could help someone this morning!

KyleMit Over a year ago

If we're going to depend on jQuery anyway, much prefer ŁukaszW.pl$('#strings').val(values.split(',')). Without jQuery, ŁukaszW.pl's Plain Old Javascript document.getElementById('strings').value = ["Test", "Prof", "Off"] also accomplishes in a one-liner

Adam Leggett · Accepted Answer · 2018-11-06 01:18:11Z

166

in jQuery:

$("#strings").val(["Test", "Prof", "Off"]);

or in pure JavaScript:

var element = document.getElementById('strings');
var values = ["Test", "Prof", "Off"];
for (var i = 0; i < element.options.length; i++) {
    element.options[i].selected = values.indexOf(element.options[i].value) >= 0;
}

jQuery does significant abstraction here.

edited Nov 6, 2018 at 1:18

Adam Leggett

4,18432 silver badges27 bronze badges

answered May 16, 2013 at 8:54

Łukasz W.

9,7935 gold badges40 silver badges65 bronze badges

9 Comments

Todd Vance Over a year ago

This worked perfect for me and my 'chosen' selects... have to add all the values at once (just like you say above)

Bill Keese Over a year ago

Hmm, the pure javascript isn't working for me on Chrome/mac or FF/mac. It has no effect on what's actually selected, at least what appears selected visually in the browser.

Ravi G Over a year ago

Its working when I am passing string, but not when I am passing array.

jayp Over a year ago

Having the same issue; this only works with string values, not arrays (using plain JS, not jQuery).

Jon Wyatt Over a year ago

For those experiencing issues with this, you should make sure you trigger a 'change' event after setting the value in JavaScript. Using jQuery this would be $("#strings").val(["Test", "Prof", "Off"]).trigger('change');

|

PostureOfLearning · Accepted Answer · 2014-01-24 01:32:34Z

26

Just provide the jQuery val function with an array of values:

var values = "Test,Prof,Off";
$('#strings').val(values.split(','));

And to get the selected values in the same format:

values = $('#strings').val();

answered Jan 24, 2014 at 1:32

PostureOfLearning

3,5413 gold badges29 silver badges46 bronze badges

Comments

Mariano Desanze · Accepted Answer · 2017-11-02 23:10:39Z

Pure JavaScript ES6 solution

Catch every option with a querySelectorAll function and split the values string.
Use Array#forEach to iterate over every element from the values array.
Use Array#find to find the option matching given value.
Set it's selected attribute to true.

Note: Array#from transforms an array-like object into an array and then you are able to use Array.prototype functions on it, like find or map.

var values = "Test,Prof,Off",
    options = Array.from(document.querySelectorAll('#strings option'));

values.split(',').forEach(function(v) {
  options.find(c => c.value == v).selected = true;
});

<select name='strings' id="strings" multiple style="width:100px;">
    <option value="Test">Test</option>
    <option value="Prof">Prof</option>
    <option value="Live">Live</option>
    <option value="Off">Off</option>
    <option value="On">On</option>
</select>

bummi · Accepted Answer · 2015-12-17 07:13:21Z

2

var groups = ["Test", "Prof","Off"];

    $('#fruits option').filter(function() {
      return groups.indexOf($(this).text()) > -1; //Options text exists in array
    }).prop('selected', true); //Set selected

edited Dec 17, 2015 at 7:13

bummi

27.4k14 gold badges67 silver badges105 bronze badges

answered Dec 17, 2015 at 7:00

Member con

392 bronze badges

Comments

Mariano Desanze · Accepted Answer · 2017-11-02 23:22:57Z

Pure JavaScript ES5 solution

For some reason you don't use jQuery nor ES6? This might help you:

var values = "Test,Prof,Off";
var splitValues = values.split(',');
var multi = document.getElementById('strings');

multi.value = null; // Reset pre-selected options (just in case)
var multiLen = multi.options.length;
for (var i = 0; i < multiLen; i++) {
  if (splitValues.indexOf(multi.options[i].value) >= 0) {
    multi.options[i].selected = true;
  }
}

<select name='strings' id="strings" multiple style="width:100px;">
    <option value="Test">Test</option>
    <option value="Prof">Prof</option>
    <option value="Live">Live</option>
    <option value="Off">Off</option>
    <option value="On" selected>On</option>
</select>

buydadip · Accepted Answer · 2019-02-06 15:04:29Z

2

Basically do a values.split(',') and then loop through the resulting array and set the Select.

edited Feb 6, 2019 at 15:04

buydadip

9,48722 gold badges93 silver badges160 bronze badges

answered May 16, 2013 at 8:51

kashipai

1573 silver badges13 bronze badges

Comments

Marian Roca · Accepted Answer · 2023-01-25 11:06:23Z

-1

Use this:

$('#demo').multiselect('select', value);

For multiple values just use a loop For more properties this page is very good

answered Jan 25, 2023 at 11:06

Marian Roca

11 silver badge2 bronze badges

Comments

Serdar Karaca · Accepted Answer · 2023-10-01 23:18:24Z

It's been a long time ago, but for those who are looking for a solution to this issue, I leave the following information;

    //My sample data is json data in array.
    let arrayData = [
        {
            blablabla: 'text1'
            ,value: 'value1'
        },
        {
            blablabla: 'text2'
            ,value: 'value2'
        },
        {
            blablabla: 'text3'
            ,value: 'value3'
        },
        
    ];
    

    for(let i = 0; i < arrayData.length; i++)
    {
        $('#multiSelect').multiSelect('select',arrayData[i].value);
        //I enter the loop and fill the data in order in each loop.
    }

    $('#multiSelect').multiSelect('refresh');
    //At the end of the loop I refresh the related item.

Caconde · Accepted Answer · 2019-10-03 17:41:29Z

-2

this is error in some answers for replace |

var mystring = "this|is|a|test";
mystring = mystring.replace(/|/g, "");
alert(mystring);

this correction is correct but the | In the end it should look like this \|

var mystring = "this|is|a|test";
mystring = mystring.replace(/\|/g, "");
alert(mystring);

edited Oct 3, 2019 at 17:41

Caconde

4,5237 gold badges39 silver badges34 bronze badges

answered Oct 3, 2019 at 16:53

Xavier Moreno

12 bronze badges

Collectives™ on Stack Overflow

Javascript/jQuery: Set Values (Selection) in a multiple Select

10 Answers 10

3 Comments

9 Comments

Comments

Pure JavaScript ES6 solution

Comments

Comments

Pure JavaScript ES5 solution

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

3 Comments

9 Comments

Comments

Pure JavaScript ES6 solution

Comments

Comments

Pure JavaScript ES5 solution

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related