I need a way to have a multi-select box that has a disabled element. I want the box to look like:
All
-----or-----
option 1
option 2
with the "----or----" not being able to be selected. So far my code is pretty simple:
<select multiple size="4" >
<option value="0">All</option>
<option value="1">----or----</option>
<option value="2">option 1</option>
<option value="3">option 2</option>
</select>
But as of yet I have been unable to get the '----or----" disabled or unselectable. I've looked around and I'm not sure there is an HTML attribute that will disable it, but I'm really not sure and I'm also not sure this is the best way to present this option. Any help you can offer is greatly appreciated!
Maybe take a look at the optgroup element ?
<select multiple size="4" >
<option value="0">All</option>
<optgroup label="----or----"></optgroup>
<option value="2">option 1</option>
<option value="3">option 2</option>
</select>
Related
Is there an <input> or <button> type that makes a <select>-like chevron? I tried <input type="select"/> with no success. Or is it possible to use <select> as an input/button? If none of these are possible/recommended, what is the simplest way to make a button with a chevron?
The select tag is an input!
Here is an example of the select Tag
<select>
<option value="optionOne">Option 1</option>
<option value="optionTwo">Option 2</option>
<option value="optionThree">Option 3</option>
<option value="optionFour">Option 4</option>
</select>
To see it in action: https://jsfiddle.net/y4hh3ued/
I'm trying to create html (dynamically) which has multiple select elements, but not all of them appear to be displayed. Here's a minimal example:
<html>
<body>
<select/>
<select/>
</body>
</html>
This renders as a single select box in all the browsers I've tried. If I add more selects, I get more select boxes, but never as many as I ask for. Can someone explain what is going on?
It's because you are not closing the select tag correctly, it should be like this:
<select></select>
<select></select>
You need to add some values to your script like this example:
<html>
<body>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
</body>
</html>
Don't close the tags directly like you did in your question. Not all tags are self-closed, like select isn't a self-closed tag because it need values/options to make it work.
Useful list of self-closing tags: http://xahlee.info/js/html5_non-closing_tag.html
Hope this will help you.
Is there a way to add an additional 'submenu' to a dropdown list on a contact form? So it would technically work like a drop-down navigation.
Below is the drop-down list for my contact form. And i've been asked to see if I can add additional options to lets say, Existing Partner. So when they hover over that item it expands to other options.
<label for="hear">How did you hear about us? </label>
<select class="contact-drop-down" name="hear" id="hear">
<option>Click to choose</option>
<option value="1">Existing Partner</option>
<option value="2">Word of mouth</option>
<option value="3">Brochure</option>
<option value="4">Email mailshot</option>
<option value="5">Google</option>
<option value="6">Yahoo</option>
<option value="7">Bing</option>
<option value="8">Other search engine</option>
<option value="9">Other</option>
</select>
You can't expand on hover with the standard select within HTML, but you can with either Javascript or HTML5 and CSS3.
This site has a list of 30 examples of HTML5 navigation menus and this site has a large selection of Javascript and JQuery examples.
Hopefully one of these might help you get what you want.
You can use optgroup tag for this.
<select>
<optgroup label="Existing Partners">
<option value="existing_partner_a">Partner A</option>
<option value="existing_partner_b">Partner B</option>
<option value="existing_partner_others">Others</option>
</optgroup>
</select>
No you cannot add sub menu to actual dropdown control. But you may find many custom controls.
Check out this
Saurabh Goyal above suggested to use . I also thought of suggesting the same. But is used for categorization & I dont think thats what you want.
Try optgroup for this .for example
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
Demo here
HTML:
display:none <b>not works</b>,the hidden can <b>not select</b>.<br>
<select size="5">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
</select><br>
display:none <b>works</b>,the hidden <b>can select</b>.<br>
<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
</select>
CSS:
select{width:50px;}
[value=C]{
display: none;
}
/* will hold the position */
[value=B]{
visibility: hidden;
}
The size attribute will affect the display and visibility, what happen to this ?
How can I hide the option in select which has a size attribute ?
See updated section
I think you can not do that only with CSS for all browsers you'll need some JS code, there is a previous question quite similar:
How to hide a <option> in a <select> menu with CSS?
In Chrome (v. 30) "display:none" doesn't work, however in Firefox (v. 24) It works, the option with "display:none" doesn't appear in the list.
UPDATE2:
In the current Chrome (v. 70) an Firefox (v. 63) versions, the use of css with "display:none" along with attribute "disabled" in the option tag removes the option from the list and it doesn't appear any more.
<html><body>
<select>
<option disabled style="display:none">Hola</option>
<option>Hello</option>
<option>Ciao</option>
</select>
</body></html>
Thanks to #achecopar for the help
The property Display:none wont work on the options tag
so you have only two options as work around
1. Either disable then with disabled="disabled".
2. Remove the options you don't want to see and insert them again when needed.
you may be able to find some other work around too, but i don't think it will be consistent in all the browsers
There is a technique for hiding options within a select in this post: How to hide a <option> in a <select> menu with CSS?
Use following jQuery to hide and show under select
jQuery(selector).toggleOption(true); // show option
jQuery(selector).toggleOption(false); // hide option
is you need this...
<select>
<option value="A">A</option>
<option disabled value="B">B</option>
<option value="C">C</option>
<option disabled value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
</select>
the disable value are not select-able.
if you want to hide go here..
http://jsbin.com/anoci
Is there any way to have a drop-down list in which non of the items are selectable? So basically, I'm just looking to use it as a way of showing/hiding a list. I don't want any hover highlighting and I don't want to be able to change the selected item.
Could you suggest if this is possible, or if anyone has any other ideas to achieve something similar, could you point me to a good example.
Thanks
The optgroup tag comes to mind. It has a disabled attribute.
<select>
<optgroup label="My List" disabled>
<option value="item1">Item 1</option>
<option value="item2">Item 2</option>
</optgroup>
</select>
However, IE 6 and 7 don't respect the disabled. Arrgh. Neither do they listen to the readonly attribute slapped on the whole select.
You will have to add a onchange="this.value ='item1';" fallback for those browsers, which obviously isn't watertight if JavaScript is turned off.
JSFiddle here
Is there any way to have a drop-down list in which non of the items are selectable?
I have same requirement So I did like this,
<select >
<option value="item1" disabled>Item 1</option>
<option value="item2" disabled>Item 2</option>
<option value="item3" disabled>Item 3</option>
<option value="item4" disabled>Item 4</option>
</select>
On JsFiddle