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
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'm trying to make everything in my form required, including the select menus. w3schools says that no major browsers support the required attribute on <select> tags..
http://www.w3schools.com/tags/att_select_required.asp
Is there really no way to provide client side validation on select menus the same way as input text fields? I have a working plunkr here, where if you click check with everything blank, the warning appears under the the first input, even though there is a select menu above it.
if it were working the "this field is required" message would appear under the select menu since it is the first invalid form item. Additionally if you fill out all input fields no message appears anywhere. The code is in angular and spans 5 files, so view it on the plunkr .
If you know any way to apply the same validation to select menus, or have confirmation this is impossible, I'd greatly appreciate it.
W3schools is incorrect as usual. Useful references like MDN on select tell that required is supported by modern versions of all major browsers; the main problem with support is lack of support in IE 9 and older.
However, you need to note the definition of the attribute: it means that the control satisfies the constraint if and only if its value is nonempty. Since the first option is selected by default (unless you make another option initially selected using the selected attribute), you need to make its value empty. Example:
:invalid { outline: solid red }
<form>
<select name=fruit required>
<option value="">Please select a fruit
<option>apple
<option>orange
</select>
<input type=submit value=Submit>
</form>
If you need to cover IE 9 and older, too, just add simple JavaScript code that checks that value property of the select element is not empty when the form is to be submitted (or whenever you are checking the form data in the browser).
The built-in HTML 5 alerts aren't coming up because technically you already have an option selected. Angular's select directive creates and defaults to a blank option if the ng-model attribute in the element doesn't refer to a specific options value.
Inspect your select element and you'll see
<option value="?" selected="selected"></option>
You could have your ng-model attribute refer to a valid options value and then hide the automatically generated blank value option, but then, you would always have a value pre-selected and your animation effects for select elements would be lost. See example here.
Your only other option is to create your own validation and have a div underneath each select element that either shows or hides based on if a valid value is selected.
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 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).