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.
Related
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.
What I want to achieve is to hide the value from results.
<input list="search-results" value="userText" id="geocoder" autocomplete="off">
<datalist id="search-results">
<option value="userText">Address 1</option>
<option value="userText">Address 2</option>
<option value="userText">Address 3</option>
</datalist>
https://jsfiddle.net/2w6hjgn8/2/
I need to show all option elements in datalist.
Basic datalist function is to filter results by user input. But I want to use it another way.
I am creating live search functionality. If user enter text the search function starts, makes request and get the results. Each result is a separate option in datalist which is added dynamically. Every result includes a field "display_name" which I would like to display. Unfortunately, "display_name" does not always contain the exact text entered by the user. Dataset filters the result and does not show all of them.
My idea is to enter the same value in the value field as user entered - so all results will be displayed.
Unfortunately, dataset displays option's value and innerHTML. Is there any way to hide value?
The label attribute of the option tag allows variation between the displayed text and the option's value on some browsers.
<option value="aaa" label="xxx">
I found that on Firefox the datalist filters by the option's displayed text, whereas on Chrome each option displays and filters by both the label and the value. You can give it a try on your target browsers here: https://jsfiddle.net/Lyjwn0xs/1/
Your goal of filtering by hidden data as opposed to the displayed data doesn't seem to fit the default browser functionality of the datalist element, but you can customize its behavior using JavaScript. MDN has a good example of this on the datalist page under Customizing Datalist Styles.
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');
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.
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');