val("text") is not setting the option as selected

Question

I am trying to change the value of this select using $('#mySel').val('1.5'); I have found several places that recommend doing it like this. But for some reason it doesn't seem to be working, and instead just selects the first option 0.5. Does anyone know why this would not work? Or what might work instead? Here is the code I am using.

$('#mySel').val('1.5');
$('#courseset').trigger('create');

<select name="hours" id="mySel" data-mini="true" >
   <option value="0.5" >0.5</option>
   <option value="1.0" >1.0</option>
   <option value="1.5" >1.5</option>
   <option value="2.0" >2.0</option>
   <option value="2.5" >2.5</option>
   <option value="3.0" >3.0</option>
   <option value="3.5" >3.5</option>
   <option value="4.0" >4.0</option>
   <option value="4.5" >4.5</option>
   <option value="5.0" >5.0</option>
   <option value="5.5" >5.5</option>
   <option value="6.0" >6.0</option>
   <option value="6.5" >6.5</option>
   <option value="7.0" >7.0</option>
   <option value="7.5" >7.5</option>
   <option value="8.0" >8.0</option>
   <option value="8.5" >8.5</option>
   <option value="9.0" >9.0</option>
   <option value="9.5" >9.5</option>
   <option value="10.0" >10.0</option>
   <option value="10.5" >10.5</option>
   <option value="11.0" >11.0</option>
   <option value="11.5" >11.5</option>
   <option value="12.0" >12.0</option>
</select>

http://jsfiddle.net/KZBfd/ <- Works for me. Most likely something else is causing the issue. Check your error console. — Selvakumar Arumugam, Nov 01 '12 at 21:13
Aren't you trying to select a option ? otherwise here's a similar case [link](http://stackoverflow.com/questions/496052/jquery-setting-the-selected-value-of-a-select-control-via-its-text-description) and this works for me too — Chris, Nov 01 '12 at 21:14
@Vega I have checked the error console and it doesn't give any errors. Is there some sort of error that could come from the jquery mobile or something? — Eman, Nov 01 '12 at 21:15
Are you using $('#mySel').val('1.5'); before initialize your DOM element #mySel as your snippet could suggest it? — A. Wolff, Nov 01 '12 at 21:18
Is this `$('#mySel').val('1.5');` is wrapped inside DOM ready like `$(function () { $('#mySel').val('1.5'); });`. That line would only work if that `#mySel` exist in DOM. — Selvakumar Arumugam, Nov 01 '12 at 21:19
Or jQuery mobile's equivalent, like `pageinit` or so: http://jquerymobile.com/demos/1.2.0/docs/api/events.html. — Felix Kling, Nov 01 '12 at 21:20
@roasted What do you mean by initialize your DOM element. I think it is valid because if i instead do `alert($('#mySel').val())` it returns the first option. — Eman, Nov 01 '12 at 21:21
@Eman See Vega comment "That line would only work if that #mySel exist in DOM." — A. Wolff, Nov 01 '12 at 21:21
@Vega Yes, but if I can call `alert($('#mySel').val())` shouldn't it work to assign the new value also? — Eman, Nov 01 '12 at 21:24
@Vega I use the line `$('#courseset').trigger('create');` right before I try and change the value. shouldn't that create it in the DOM? — Eman, Nov 01 '12 at 21:35
If `alert($('#mySel').val())` returns first option (that is `0.5`) then you are fine.. I am not sure why `.val()` is not working for you. — Selvakumar Arumugam, Nov 01 '12 at 21:37

score 1 · Answer 1 · answered Nov 01 '12 at 21:14

1

$("#mySel option").filter(function() {
    return $(this).text() == '1.5';
}).prop('selected', true);

answered Nov 01 '12 at 21:14

adeneo

312,895
29
395
388

Why not just `.val()`? jQuery `.val` handles it just fine. – Selvakumar Arumugam Nov 01 '12 at 21:14
@Vega: Yes, it should. Yet it does not work for the OP, do you know the reason? Btw this snippet does select an option by text content, not by value – Bergi Nov 01 '12 at 22:03

score 1 · Accepted Answer · answered Nov 01 '12 at 21:58

1

This should match the option field without knowing its place in the DOM

$('#mySel option[value="1.5"]').attr('selected', 'selected');

answered Nov 01 '12 at 21:58

daleyjem

2,335
1
23
34

This selects the option only if nothing was selected yet. – Bergi Nov 01 '12 at 22:01
Not according to my own testing. If you do have this issue, you need only first $('#mySel option').removeAttr('selected') to reset all options – daleyjem Nov 01 '12 at 22:07
1

No, the reason is that [un]setting attributes does not help, it only changes the `defaultSelected` property. Use `.prop("selected", true)` instead – Bergi Nov 01 '12 at 22:08
Maybe there's a browser inconsistency then. I'm using Chrome and it works just fine. – daleyjem Nov 01 '12 at 23:37
Might also depend on the jQuery version. Use one that properly distinguishes between `.prop` and `.attr`. Chrome does implement the `defaultChecked` property correctly – Bergi Nov 01 '12 at 23:41
if you could give me specific details on versions where this won't work, i'll be happy to confirm. i've tested against jquery versions 1.3 and 1.8 – daleyjem Nov 02 '12 at 00:18
This question has already been asked. Check out [prop() vs attr()](http://stackoverflow.com/q/5874652/1048572) and [Cannot set “selected”=“selected” via attr() on – Bergi Nov 02 '12 at 11:20

score 0 · Answer 3 · answered Nov 01 '12 at 21:27

0

Try use .attr("selected", "selected).

You can also use nth-child to select the option, in your case, you can try the following:

$("#mySel :nth-child(3)").attr('selected', 'selected'); //selected option value=1.5

answered Nov 01 '12 at 21:27

kli

283
1
5
16

This selects the option only if nothing was selected yet. – Bergi Nov 01 '12 at 22:02

val("text") is not setting the option as selected

3 Answers3