Develop Reference

Use JQuery to select a dropdown option and fire the OnChange function

I have a page that loads with a dropdown in it with a select dropdown list with an id = "accounts". When the page loads it is already on the Account Orange page. I would like to use JQuery to find the select id element and then force it click on the 3 option which should be index 2.
<select id="accounts" onChange="changeAccount(this.form,this[this.selectedIndex].value)">
<OPTION value="">Select One...</OPTION>
<OPTION value="111">Account Red</OPTION>
<OPTION value="222">Account Yellow</OPTION>
<OPTION value="333">Account Blue</OPTION>
<OPTION value="444" selected>Account Orange</OPTION>
</select>
Something like this works:
jQuery('#accounts>option:eq(2)').prop('selected', true);
Currently when the page loads it does select the correct option despite the "selected" tag but it does not fire it to the OnChange function to select "Account Yellow" and then it would reload the page. That's what I would like it to do.

First, it's better to set the value of the SELECT by value instead of index. Because you might want to add extra OPTION's later (in your source code or dynamically) and then your index count is off.
Second, I find it better practice to change the value of the SELECT, instead of changing HTML attributes/properties which make it selected (e.g. not setting/changing the selected property of the OPTION, but changing the value of the SELECT). Otherwise, you might end up with more than one selected OPTION's which might work, but is not very clean coding.
Third, the suggested >option:eq(2) selector might not work if you're using OPTGROUP's, because then the OPTION is not a direct descendant of SELECT.
So, my suggestion is to use:
jQuery('#accounts').val('222').change();
It selects the right SELECT field, then sets the value to 333 and then fires the onchange event (you need to do that manually in this case).

$('#accounts>option:eq(2)').prop('selected', true).promise().then(function(){
changeAccount(this.form,this[this.selectedIndex].value)
});

Try the following:
jQuery('#accounts>option:eq(2)').prop('selected', true).closest('select').trigger('change');

Set <select> value to a non-existent option

I've got a select with options. I need to set the default of the dropdown to a value that is not in the dropdown list. The user can then leave it the same or select a value from the options in the select.
How can this be achieved?
Edit:
This is the scenario: I have a set of data that is normalized. This is fed into the select (as options). After rendering, a value is selected by default. However, sometimes, this value (that has to be selected) might not be in the options - so a good UX would be to still have this shown as the selected option, even if it is not in the normalized data. The user can leave it be or select a "correct" option.

I assume you mean for a placeholder similar to text inputs. The only way I know of to do this is to make the selected option disabled; however, it must still be an option in the markup. e.g.
<select>
<option disabled="" selected="" value="">Select one of the Options Below</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
You may be better served by making your own javascript powered one.

Firefox selectedIndex on select changes on hover

In Firefox, there seems to be some weird issues around when the selectedIndex of a select field changes. It seems to change on hover, rather than on click.
Using:
setInterval(function(){console.log($('select').prop('selectedIndex'));}, 1000);
I can see the selectedIndex change as I hover over different items (the items getting a blue background and white text as I hover over them).
In Chrome, the selectedIndex only changes when an option is clicked.
I can't think of a way to work around this - I've tried to capture clicks on the options and check those against a data attribute on the select as per this SO question but the click handler only seems to work sporadically.

So when i try this on my page:
$('select[name=sel1]').change(function(){
alert(this.value);
});
With this select:
<select name="sel1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Than in firefox it only alerts when i select the option...
Greetings

How to change dropdown combobox value using Javascript

I know this may be kind of a simple question, but cant seem to find an answer anywhere, I have a form in my site, with multiple form elements like combobox, text, radio buttons, checks etc, My requirement is to change the values of those form elements when a user from dropdown combobox is selected, I have successfully implemented that functionality with all the form elements except for the comboboxes, I cant seem to find any way to change the options of the combobox...

Since you included the jQuery tag,
select.val(value);
where select is the jQuery select element and value is the value.
JSFiddle
<select>
<option value="1">First option</option>
<option value="2">Second option</option>
<option value="3">Third option</option>
</select>
<script>
$('select').val('2');
</script>

New option can be added to the combobox as below
$('< option value=’Value’ > Sample Value < /option >').appendTo('#ComboId');
a dropdown value can be selected by
$('#ComboId').val('Value');

How can I progressively enhance country and state select fields?

I haven't seen any website do this properly...
If I have two select fields, country and state, then I would code it like so:
<select name="country">
<option>USA</option>
<option>France</option>
</select>
<select name="state">
<option></option>
</select>
I would then populate the state field using AJAX depending on the selection of the country.
However, this is the progressively enhanced state. How would it be done without the use of Javascript? and how should it be enhanced (if the previous example isn't the best way)?

My recommendation is to have a submit button next / below the country drop down. When submitted the server will populate the state for the selected country and sends the response back.
Now, in your javascript on page load hide this button and attach on change handler to the country dropdown and make an AJAX call which will return the states.
So, if the javascript is disabled the button would perform the retrieval of the states. If enabled AJAX call would do the same.

One solution could be to join the two selects together. Like
<select name="countryAndState">
<option>USA - Alabama</option>
<option>USA - Alaska</option>
...
<option>France - Alsace</option>
<option>France - Aquitaine</option>
</select>
or better
<select name="countryAndState">
<optgroup label="USA">
<option>Alabama</option>
...
</optgroup>
<optgroup label="France">
<option>Alsace</option>
...
</optgroup>
</select>
Of course, at least in the second form you will have to ensure that the option values are unique. The optgroup element is the recommended way to group select options hierarchical in a tree order. That means, your enhancing javascript will also be able to extract the tree structure from DOM.
The other solution would be populating the state field server side, i.e. split your form up in two steps where one first selects the country, then the state. This could be done with a cookie or something to save the selected country; and whenever the submitted value for country differs from the saved value you need to output a new (unselected) state select element.