Issue on Setting HTML Select Option Using jQuery

Question

I am trying to change selected item from the list options dynamically at This Demo but it is not working.

<select id="selItems" class="selectpicker">
    <option>Select From List</option>
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>
<p>
<button id="setdefault" type="submit" class="btn">Set Default</button>

<script>
 $("#setdefault").on("click", function () {
   $("#selItems option:eq(2)").attr("selected", "selected");
 });
</script>

can you please let me know what I am doing wrong?

Your `select` has an ID of `setdefault`... Therer is no `selItems` — tymeJV, Sep 25 '14 at 19:39
thanks tymeJV , I fixed the code but still same thing happening! — Suffii, Sep 25 '14 at 19:43
possible duplicate of [How to set selected value on select using selectpicker plugin from bootstrap](http://stackoverflow.com/questions/14804253/how-to-set-selected-value-on-select-using-selectpicker-plugin-from-bootstrap) — Joe Enos, Sep 25 '14 at 19:53

isherwood · Answer 1 · 2014-09-25T19:51:50.110

1

Bootstrap Select has a method for doing this. You shouldn't be manually manipulating attributes because the element seen in the page isn't the original select element anyway.

$("#setdefault").on("click", function () {
    $("#selItems").selectpicker('val', 'Ketchup');
});

Demo

http://silviomoreto.github.io/bootstrap-select/#methods

edited Sep 25 '14 at 19:51

answered Sep 25 '14 at 19:46

isherwood

58,414
16
114
157

score 1 · Answer 2 · edited Sep 25 '14 at 19:52

There are several reasons why your code is not working how you expect it to.

You are setting a click event on your select element, and not on the "set default" button.

Your actual select element is not visible on the page because it is being replaced by the jquery plugin you are using.. so even if you set the selected attribute of your select, you won't see it on the page.

You should refer to the documentation of that plugin to figure out how it is used.

score 1 · Accepted Answer · answered Sep 25 '14 at 19:48

1

Try using prop instead of attr:

 $("#setdefault").on("click", function () {
   $("#selItems option:eq(2)").prop("selected", true);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selItems" class="selectpicker">
    <option>Select From List</option>
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>
<p>
<button id="setdefault" type="submit" class="btn">Set Default</button>

answered Sep 25 '14 at 19:48

jrummell

42,637
17
112
171

Thanks jrummell it was a wise hint! – Suffii Sep 25 '14 at 19:52
See http://stackoverflow.com/questions/5874652/prop-vs-attr for more about prop vs attr. – jrummell Sep 25 '14 at 19:53

score 0 · Answer 4 · answered Sep 25 '14 at 19:44

0

Try switching

$("#setdefault").on("click",function(){
 $("#selItems option:eq(3)").attr("selected", "selected");
});

to

$("#setdefault").on("click",function(){
 $("#setdefault option:eq(3)").attr("selected", "selected");
});

answered Sep 25 '14 at 19:44

Jack Shultz

2,031
2
30
53

`#setdefault` is not a `select` element – Huangism Sep 25 '14 at 19:46

score 0 · Answer 5 · answered Sep 25 '14 at 19:49

0

Just use val():

$("#setdefault").on("click", function() {
  $("#selItems").val("Mustard");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selItems" class="selectpicker">
  <option>Select From List</option>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
<p>
<button id="setdefault" type="submit" class="btn">Set Default</button>

answered Sep 25 '14 at 19:49

Rudolph Gottesheim

1,671
1
17
30

Thanks Rudolph but u miss the Bootstrap Part! – Suffii Sep 25 '14 at 19:52

Issue on Setting HTML Select Option Using jQuery

5 Answers5