how to Set the values of array object as selected in dropdown list(multiselect) using jquery/javascript

Question

var selectedCity = [{ cityid:"1" }, { cityid:"3" }]

HTML:

City:<select name="city" multiple>
    <option value="1">Bombay</option>
    <option value="2">Chennai</option>
    <option value="3">Bangalore</option>
    <option value="4">Calcutta</option>
    <option value="5">Delhi</option>
     </select>

I have an array object ie selectedCity with the selected city values .

Now how to set these array values as selected in the dropdown list using jquery each function such that it has Bombay(1) and Bangalore(3) as selected in dropdown list box

please correct `cityid` in `Object { cityid="1"}, Object {cityidid="3"}` — Bhushan Kawadkar, Nov 18 '14 at 09:44

score 1 · Answer 1 · answered Nov 18 '14 at 09:49

1

Here is how you should do it

 <select name="cars" multiple>
  <option selected="selected" value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option selected="selected" value="opel">Opel</option>
  <option value="audi">Audi</option>
</select`>`

answered Nov 18 '14 at 09:49

He has a completed select and want to change the val by an object from javascript... so this is not helpful – Mephiztopheles Nov 18 '14 at 09:50

score 0 · Answer 2 · answered Nov 18 '14 at 09:47

0

Here you go:

var values = [];
$.each(selectedCity, function( ){
    values.push(this.cityid);
});
$('select').val(values);

Create a list, push each val to the list and set it as val from the select.
Multiselect val takes as a list: .val([1,3])

answered Nov 18 '14 at 09:47

Mephiztopheles

2,228
1
12
25

score 0 · Answer 3 · 2014-11-18T10:58:09.050

0

Here is how I do it just send those names

Javascript:

//loops through objects

for (var key in selectedCity) {
     $('select>option:eq(key.cityid)').prop('selected', true);

}

HTML:

<select multiple>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

edited Nov 18 '14 at 10:58

answered Nov 18 '14 at 10:10

I just can say again...He has a completed select and want to change the val by an object from javascript... so this is not helpful – Mephiztopheles Nov 18 '14 at 10:17
for (var key in selectedCity.cityid) { $('select>option:eq(key)').attr('selected', true); } this should work – Nov 18 '14 at 10:24
aditionally, i would prefer `.prop()`, because when you are using `.attr()` to change the checked state of a checkbox, it wont work well – Mephiztopheles Nov 18 '14 at 10:32
That might work too .. thanks @Mephiztopheles – Nov 18 '14 at 10:36
can u explain it using .prop – user3841558 Nov 18 '14 at 10:41
`$('select>option:eq(key.cityid)').prop('selected', true);` :D – Mephiztopheles Nov 18 '14 at 10:41
`.prop` can set states like `selected, checked, disabled ...` better than `.attr`. Better to read and better to set. To read, just use the first parameter as the state/attribute you want to read – Mephiztopheles Nov 18 '14 at 10:42
http://stackoverflow.com/questions/5874652/prop-vs-attr see here details – Nov 18 '14 at 10:45

how to Set the values of array object as selected in dropdown list(multiselect) using jquery/javascript

3 Answers3

Javascript:

HTML: