Set <select> value to a non-existent option - javascript

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.

Related

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.

Split select options into sections

I got a question about the select box in HTML where I can't seem to find the answer on with Google.
I have a select html field with 1000 options:
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
....
Now I can show the visitor all the options in 1 select box but when he needs the number 877 he needs to scroll all the way down. Is it possible to transform the select box (with javascript, or something else, PHP is also an option) to make the select box step based. So for example first you get 5 choices:
<option value="1-200">1-200</option>
<option value="201-400">201-400</option>
<option value="401-600">401-600</option>
<option value="601-800">601-800</option>
<option value="801-1000">801-1000</option>
And when he selects one of those it becomes 1-50, 51-100, 101-150, 151-200
I searched if Chosen could do this but I don't see an option where this is possible. You could search for a number but that is my last option if this isn't possible.
There are several ways of acomplishing what you want....
As suggested by #Rory, Select2 is a very good option since it
has search capability.
However, if you must, you can count your array, then split into
your desired chunk size, then insert each chunk as an optgroup
element into the select, then upon clicking a group, it expands to show the options inside the group.
The other way to do it is look for a plugin that has tree
You can also use two select boxes, one to select the group, and the
other for options

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');

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.

Categories

Resources