How to change a choice selection with jQuery

Question

I have a choice:

<select id="selectlang">
  <option value="en" selected>English</option>
  <option value="de">Deutsch</option>
</select>

Now, I would like to set the default value by inspecting the browser's language.

var lang = window.navigator.userLanguage || window.navigator.language;

How can I modify the selection of a choice with jQuery?

score 4 · Accepted Answer · answered May 09 '13 at 12:28

4

You can do:

$("#selectlang").val(lang.split('-')[0]);

Fiddle

answered May 09 '13 at 12:28

Eli

14,779
5
59
77

score 2 · Answer 2 · answered May 09 '13 at 12:27

2

var lang = window.navigator.userLanguage || window.navigator.language;

if(lang === 'en-US')
    $('#selectlang').val('en');

Also of note, IE (of course) doesn't support this property.

answered May 09 '13 at 12:27

jterry

6,209
2
30
36

The more I think about this one, the worse it gets. I'd avoid using this property **completely**, unless you have a really specific use case and know exactly which browser your users will be in. Last resort, this has been answered [very thoroughly here](http://stackoverflow.com/questions/1043339/javascript-for-detecting-browser-language-preference). – jterry May 09 '13 at 14:09
The `val()` function is quite solid. None existing values like `val("xx")` simply set the first option. Spending time on the if statements seems needless. – ceving May 09 '13 at 14:55

score 1 · Answer 3 · edited May 09 '13 at 12:29

1

You can change the select value with jQuery like this:

$("#selectlang").val(lang);

but most likely you will need to validate the value of var lang = window.navigator.userLanguage || window.navigator.language;

edited May 09 '13 at 12:29

epascarello

204,599
20
195
236

answered May 09 '13 at 12:27

MISJHA

998
4
12

score 1 · Answer 4 · answered May 09 '13 at 12:28

1

You can select the value of a select box using jQuery's val() function:

$("#selectlang").val("en");

answered May 09 '13 at 12:28

Maloric

5,525
3
31
46

score 1 · Answer 5 · answered May 09 '13 at 12:29

Following code will work for you, but you have to change the value of the options kile en => en-US because var lang = window.navigator.userLanguage || window.navigator.language; will return the language code in the en-US format

$("#selectlang").val(lang );

score 0 · Answer 6 · answered May 09 '13 at 12:27

0

$('option:selected').attr('selected', false);
$('option[value="' + lang + '"]').attr('selected', true)

http://jsfiddle.net/nkVmV/2/

answered May 09 '13 at 12:27

imkost

8,033
7
29
47

score 0 · Answer 7 · answered May 09 '13 at 12:37

You have two issues to solve:

You need to be able to parse the multiple possible values that window.navigator.language can return.
You need to alter the select option accordingly.

Parsing the language string

The first issue requires a (very slightly) more complex solution than testing if lang == "en".

English can be denoted by en, but it can also be en-us (American English), en-gb (Great Britain), etc. Similarly German can be de, de-ch (Switzerland), de-at (Austria), etc. Here's a helpful list of potential values.

So it's not going to work if you just test the raw value of lang. The best solution seems to be to test only the first two characters of lang, using lang.substr(0, 2).

Adjusting the selected option of #selectlang

Once you have the language string correctly parsed, you can change the selected option using val().

Put the two together

var lang = window.navigator.userLanguage || window.navigator.language;

$("#selectlang").val(lang.substr(0, 2));

How to change a choice selection with jQuery

7 Answers7