Develop Reference

how to set a variable or store selected item from drop down list

I am making a registration form which has some drop down selection options (made with bootstrap) how do I store which option was selected from my drop down and make use of that value? I want to select an option and have it stored so I can make use of it to store information in a database.

<select onchange="console.log(this.value)">
<option value="A">A</option>
<option value="B">B</option>
</select>
Whenever the option changes, this.value gets changed.
this is nothing but a reference of the select component.
You can use this to call your own function to fire HttpRequest.

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.

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.

jQuery rating plugin that works with select options

I have tried the rateit plugin but this does not seem to work correctly with the <option selected="selected">
UPDATE:
Updated the JSfiddle to the latest jquery and now I have the issue back where it is only displaying 4 stars when I have 5 options in the select?
I have been looking for a couple of hours now to find a rating plugin which:
Doesn't require extra HTML.
Displays the option text on hover of each each using the title attribute.
Only works with full star rating.
HTML
<select class="test" id="rating1" name="Rating">
<option value="1">Poor</option>
<option value="2">Fair</option>
<option value="3" selected="selected">Good</option>
<option value="4">Very Good</option>
<option value="5">Excellent</option>
</select>

You need to make the selectbox update the rating value. Add:
$('#rating1').change(function() {
$('div#rating2').rateit('value',$(this).val());
});
See example.
Edit:
RateIt requires jQuery 1.6.0+, which is why updating the jQuery version causes the selectbox to (properly) disappear. Have a look at this fiddle to see if it meets your needs. This will "progressively enhance" the selectbox so that users without JavaScript enabled will still be able to use the select, and those with JS enabled will get the nicer version.
If you want the backing field to be shown, you have to toggle it after the rateit() call. Also, to prevent the "reset" option from showing up, you need to set another data attribute and extend the select a bit:
Example.

Your jQuery version is old, you need 1.6 or newer.