I've been looking for a way to style select boxes based on their selected option. The data is coming in from Django so there are populated fields on load.
I've been using this javascript/jQuery solution with some success.
Style <select> element based on selected <option>
The basic idea is that the selected option value is moved to a class in the select box so you can style off that class.
What I've done here is duplicate the code into two sections. Once to run on load and another to run on change.
$('select').attr('class', '').addClass($('select').children(':selected').val());
$('select').on('change', function(ev) {
$(this).attr('class', '').addClass($(this).children(':selected').val());
});
This doesn't seem to work for multiple select boxes on load.
What happens is the on load code finds the first select box and then adds the class to all select boxes on the page, so basically it doesn't iterate over all select boxes and run one by one.
The second bit runs fine based on changing the select value.
Here is a fiddle http://jsfiddle.net/9sx6fos7/
As you can see both boxes take the class of the first on load.
Thank you!
Related
I have written a script that takes a pull down <select> on a web page, and adds a multiple attribute to the <select> so that multiple options can be picked. However, when "multiple" is set my <select> element loses its dropdown arrow and turns into a select box with no drop down. Is there any way to set a select to accept multiple options while retaining it as a drop down on the web page? The script is rather long as it uses other information on the page to determine if the <select> needs to but multiple or single select, the code which changes this attribute is below.
if (Qtype === "Multi-Select") {
select_elem.setAttribute("multiple", "multiple");
}
if (Qtype === "Single-Select") {
select_elem.removeAttribute("multiple");
}
When you add the multiple attribute to the select it changes the control to a select box by default (to let the user pick more than one option).
An easy way to get your desired behavior is by using a plugin.
One plugin to do this (there are many more) is: multiple-select.js (It is a jQuery plugin)
Link to plugin
I am building a search tool with various select drop downs that populate with options via AJAX. The possible options populated are based on the the option chosen in the preceding select drop down. For the purpose of this tool, I want to have the first select box hidden but still need to select an option in that box so that it triggers the AJAX call on the following box, something that is supposed to happen as the result of an "onchange" event.
I've tried all kinds of different code to simulate a mouse click selection of a particular option but, while I can get the option selected, it still isn't triggering the event properly to set off the AJAX call in the following select. This is as far as I've gotten:
jQuery('#form select').first().val('the-value').trigger('click').trigger('change');
From everything I've read, that should set the option value and trigger a change event much like clicking the option. Still, this isn't working. Thanks!
You only have to use val(), like any other field...
$("select").val("2").change();
http://jsfiddle.net/Loenix34/3LbjY/
We also use change() to call associated events.
Instead of setting the value of the select, set the selected property of the given option, and then trigger a change.
$("option[value='the-value']").prop('selected', true);
$("#form select:first").change();
Fiddle Demo
I have an HTML select element (combo box) in a form with a couple if options in it. As always each option has a specific value. During the page's initialization I get a value from the server that I must use as the selected option in the list. Sometimes however I get a value from the server that does not match any of the available options. (grrrr)
I want to let the user know that the value I got from the server is not a valid option. What I'd like to do is show an empty select box (as if no selection was made) without having an actual empty option as one of the options. Also I'd like to use the default select element if possible. Is something like this possible?
Edit: When you set the value for a combox to '' in IE9 (I used $('select').val('') ) it empties the text in the combo box which is exactly what I need. Unfortunately only IE9 does this, so this is not an option.
Out of the box, HTML selects do not provide such functionality. You will have to add an empty <option value="somethingwrong">Please, pick a value</option> element and use scripting to check if the user has selected this specific value. I'd suggest catching both onchange event of the dropdown and onsubmit event of whole form.
You can insert option in select, and remove that whenever it is changed to reduce problems with that options
Check the Demo here
I have tried many ways to select an option with jquery including .val("0") .attr('selected', 'selected') and .attr('selected', 'true') and the TexoTela plugin. They all seem to update the html but the browser still shows the last item selected by the user.
Try out this fiddle... Select the dropdown value 1 and then click the link.
Is there any way to actually update the displayed value?
You mean change which item is selected?
$('select').val('0');
There are other ways, but this is the basic, following your example.
jsfiddle
You can read up on the documenation for .val() here, and the snippet:
checks, or selects, all the radio
buttons, checkboxes, and select
options that match the set of values.
EDIT for jQuery Mobile
For jQuery Mobile you also need to refresh the select as mentioned in the mobile docs:
If you manipulate a select via
JavaScript, you must call the refresh
method on it to update the visual
styling.
You can do this by:
$('select').selectmenu("refresh",true);
You're setting the option value to zero.
Set the select not the option val
$('select').val('0');
and you'll probably want to use an #id instead just a 'select' selector.
Still use your .val("0") to set the value, and to update in the browser you have to use one of the following:
.trigger("liszt:updated");
or
.trigger("chosen:updated");
Just one will work, depending on how you create your select.
It's gonna be like:
$("#Your_select").val('0');
$("#Your_select").trigger("liszt:updated");
I have a web page with several HTML Select controls that all allow multiple selection. Next to each control we have a "Clear" button that de-selects all selected items in the control, with the onclick that looks something like this:
<input type=button value="Clear" size=5 onclick="selectOptions('n.MyControl', false)">
The called Javascript code looks like this:
function selectOptions(controlName, bSelectItems)
{
for (i=0; i < document.myForm[controlName].options.length; i++)
{
document.myForm[controlName].options[i].selected = bSelectItems;
}
}
It works really well with the Select controls that allow multiple selection, but I just added a Select control that does not allow multiple selection (i.e. does not have the "multiple" attribute), and this code does not clear it. If I add the "multiple" attribute, the Clear button starts working again, so I know it has something to do with the fact that I am not allowing multiple items to be selected.
My question is, why does the above code not work and more importantly, how can I get my new Select control cleared in JavaScript?
The reason your code doesn't work is because you are trying to iterate over each option and do something, but since (like you said) the multiple attribute isn't set, it doesn't let you modify multiple options.
As for fixing it, you can try to get the selected option and then just deselect that single option.
Update:
I don't know for sure that this is the ideal solution, but it seems to work for me in IE8.
document.getElementById('myselect').selectedIndex = -1;
Of course you can get the select element whichever way works best for you, but just set the selectedIndex attribute to -1.
There is no such thing as a cleared single-<select> box. One option will always be selected as long as there are any options in the select at all. If no options have selected set at first load time, the first option will automatically get selected.
The usual approach is to have the first option as a dummy-option like <option value="">(Please select a thing)</option>, and reset to that (with select.selectedIndex= 0).