I have a <SELECT multiple> field with multiple options and I want to allow it to have only one option selected at the same time but user can hold CTRL key and select more items at once.
Is there any way how to do it? (I don't want to remove 'multiple').
Just don't make it a select multiple, but set a size to it, such as:
<select name="user" id="userID" size="3">
<option>John</option>
<option>Paul</option>
<option>Ringo</option>
<option>George</option>
</select>
Working example:
https://jsfiddle.net/q2vo8nge/
If the user should select only one option at once, just remove the "multiple" - make a normal select:
<select name="mySelect" size="3">
<option>Foo</option>
<option>Bar</option>
<option>Foo Bar</option>
<option>Bar Foo</option>
</select>
Fiddle
Why don't you want to remove the multiple attribute? The entire purpose of that attribute is to specify to the browser that multiple values may be selected from the given select element. If only a single value should be selected, remove the attribute and the browser will know to allow only a single selection.
Use the tools you have, that's what they're for.
You want only one option by default, but the user can select multiple options by pressing the CTRL key. This is (already) exactly how the SELECT multiple is meant to behave.
See this: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple
Can you please clarify your question?
<select name="flowers" size="5" style="height:200px">
<option value="1">Rose</option>
<option value="2">Tulip</option>
</select>
This simple solution allows to obtain visually a list of options, but to be able to select only one.
I had some dealings with the select \ multi-select
this is what did the trick for me
<select name="mySelect" multiple="multiple">
<option>Foo</option>
<option>Bar</option>
<option>Foo Bar</option>
<option>Bar Foo</option>
</select>
I am coming here after searching google and change thing at my-end.
So I just change this sample and it will work with jquery at run-time.
$('select[name*="homepage_select"]').removeAttr('multiple')
http://jsfiddle.net/ajayendra2707/ejkxgy1p/5/
Late to answer but might help someone else, here is how to do it without removing the 'multiple' attribute.
$('.myDropdown').chosen({
//Here you can change the value of the maximum allowed options
max_selected_options: 1
});
Related
I have an HTML select form with several options in it. I want a default option of "(select an issue)", but I don't want that option to be submittable. I want the "Please fill out this field" message to show up if the user tries to submit with this option selected.
I've seen this many times on other sites, so I know it's possible, some way or another, but I'm not sure how to approach it.
This link: How do I make a placeholder for a 'select' box?, provided by Jasper Kent, helped me figure it out.
There was a solution to do the following:
<select>
<option value="" disabled selected>Select your option</option>
<option value="hurr">Durr</option>
</select>
This forces the option to have to be switched before submission, and the user cannot re-select that option either. It also makes it the default selection.
If I use the normal datalist, for example, like this.
<input name="example" list="example" />
<datalist id="example">
<option value="Value1"></option>
<option value="Value2"></option>
</datalist>
When I click on an item, it starts only showing that element. And I can't go back to see all the items. How can I fix that?
Note that I don't want to use select either, because it doesn't allow me to copy an entry.
That is one of Datalist's limitations, but there are some workarounds: http://pebbleroad.github.io/combo-select/
Is it possible for <select>-lists to reference the same list of options, similar to <input> with <datalist>?
I generate a list of several entries, where (among other things) the user selects a value of a dropdownlist. The options in this list are the same for each entry, so I would prefer it, if the list of options doesn't need to be re-added for each dropdownlist.
I can't use <input> with <datalist>, since the user may only choose from available entries.
you could do this using jquery easily,
<datalist id="mylist">
<option value="a">
<option value="b">
<option value="b">
</datalist>
<select class="someSelect">
<select class="someSelect">
$(".someSelect").html( $("#mylist").html() );
this would replace all your select list from the datalist
This is not realy the good answer. There is a big difference between 'datalist' and 'select' which for as far as I read till yet stays unspoken : in a select the 'value' can be different from the visualized 'innerHTML', which is not the case in a datalist. So what we need is a kind of 'select' with an attribute like 'selectlist="countries' the selectlist then would look like this :
<selectlist>
<option value='1'>Belgium</option>
<option value='2'>France</option>
</selectlist>
and can be reused in more then one 'select' and send the value back to the server instead of the innerHTML.
i have select field with multiple options:
<option value="lotr">Lord of the Rings</option>
<option value="harry_potter">Harry Potter</option>
when it is submitted value "lotr" or "harry_potter" is sent, depended on users choice.
However from time to time i need to set options in back end, including previously chosen option. So i make those options look like this:
<option selected="lotr">Lord of the Rings</option>
<option value="harry_potter">Harry Potter</option>
Form is displayed correctly, i can see "Lord of the Rings" in the input, but when i try to submit it, also there is "Lord of the rings" in the params. Point is i need it to be "lotr". I have no idea what i do wrong, maybe there is another way of making selected option?
You should set selected="true" and value="lotr" as below
<option selected="true" value="lotr">Lord of the Rings</option>
Use this
<option value="lotr" selected >Lord of the Rings</option>
I have a basic form like so:
<form id="test-form">
<select id="multi" name="mymulti" multiple required>
<option value="">Choose a different Option</option>
<option>Foo</option>
<option>Bar</option>
<option>Baz</option>
</select><br>
<select id="single" name="myselect" required>
<option value="">Choose a different Option</option>
<option>Foo</option>
<option>Bar</option>
<option>Baz</option>
</select> <br>
<input type="submit">
</form>
The key point here is two selects, both required, but one is multiple and the other is not.
If you choose the default options (note you actually have to click on them), and then submit the form, it will tell you that the single select is required, but not the multiple select.
I looked at the relevant portion of the html5 spec, and although there is some talk about how the required select interacts with placeholder elements, I don't see anything about how multiple+required behaves.
The above behaviour is only in Chrome, other browsers seem to behave the same for both types. My question is, why? It seems... inconsistent. I understand how to work around it with some javascript, just not why I would have to? Can anyone explain the rationale behind this?
Demo (remember to actually choose the placeholder options).
Chrome is acting right here. While implementation in FF is simply simpel. But chrome's implementation does not only follow the spec, it is also simply logic. If a mutliple or size > 1 select is used, there is no placeholder by definition. And without a selected attribute there is indeed nothing :checked (i.e.: selected) initially.
In case of a single select with size=1. The select > option:first-child with an empty value is the placeholder option. And a single select has always one option :checked/selected.
Here is a definition of placeholder option in JS: https://github.com/aFarkas/webshim/blob/gh-pages/src/shims/form-shim-extend.js#L88-94 and here a definition of valueMissing for select: https://github.com/aFarkas/webshim/blob/gh-pages/src/shims/form-shim-extend.js#L128-130