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
Related
How can I make the selected option in a select element change dynamically, with the submission (after, really) of an input form which itself depends on the value of the select element?
details:
The app is a grocery list with a single input form. A select element with named categories ("fresh", "grocery," "beerandwine", etc) is there. I take the values and use them to route the form, via post, to my node/express app ("/list/fresh/add", "list/grocery/add", etc.). Everything works except for a UI issue I can't crack.
The select element has the "fresh" option selected by default:
<option value="/list/fresh/add/" selected>Fresh items</option>
I want this default selected attribute to change dynamically. So, say someone changes it to "grocery" and inputs "Wheaties," I want the the default option to change to "grocery". Ie:
<option value="/list/grocery/add/" selected>Grocery</option>
I can't figure out how to make this work dynamically. Nothing happens when I put it in the (one) function I have going on the page, which is what changes the form action depending on the selected option.
function changeFormAction(){
myForm.action = select.options[select.selectedIndex].value;
}
submit.addEventListener("click", changeFormAction);
I have tried making another function and calling that from inside the changeFormAction, but that didn't work, either. I also tried putting an event listener on the form, but I just couldn't get it to do anything.
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!
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 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).