How do you get the selected option to be in view on page load?
<select name="whatever" size="5">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7" selected>7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
If I understand you correctly, you want the item shown in the dropdown list to be the selected item when the page loads. By default behavior the selected view does in fact show "in view" on page load. What are you seeing that you do not expect?
note: your html should be
<option value="7" selected="selected">7</option>
to be a valid html tag.
All browsers I've tested (Firefox, Chrome, Opera and IE7) scroll the contents to display the selected option.
Edit: Windows XP
Related
I'm making a dropdown menu in HTML and was trying to figure out how to pre-select a drop down value when the page loads. I've tried the following, using the selected option to indicate what value I want to be the default upon load. Though, this doesn't seem to work and I still end up with the first option being the default. I'm sure it's really simple but is there
<select selected="3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
Rather than manually put it in the <option value> tag, since these options are being generated via a loop, is there a way in the <select> tag to indicate what option should be defaulted? Thanks.
Use the selected property of the <option> you want selected by default:
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
You can set that property programatically, if you update your question to include how you are generating, I can update this to show you how.
I have a code for select-menu like this.
<select class="custom-select">
<option value="">Select from the list</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I want to style the drop-down like the following:
I am wondering how can I achieve this with only CSS.
NOTE: I am using bootstrap select-menu.
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
I've managed to make myself drop menu navigation with html <select>. I've encountered one problem, though.
My external links aren't working. Namely Youtube.
Here is the code:
<select ONCHANGE="location = this.options[this.selectedIndex].value;">
<option value="" selected="selected">Navigation</option>
<option value="index.html">Home</option>
<option value="detroitvideoproduction.html">Video Production</option>
<option value="locationsounddetroit.html">Location Sound</option>
<option value="videoeditingdetroit.html">Video Editing</option>
<option value="custommotiongraphicsdetroit.html">Custom Graphics</option>
<option value="demoreel.html">Demo Reel</option>
<option value="http://www.youtube.com/user/VideoDetroitMI?ob=0">You Tube</option>
<option value="http://vimeo.com/liveoutloudproductions">Vimeo</option>
<option value="dslrrentalsdetroit.html">Camera Rental</option>
<option value="lectrosonicsrentalsdetroit.html">Audio Rental</option>
<option value="griprentalsdetroit.html">Grip Rental</option>
<option value="camerasupportdetroit.html">Camera Support</option>
<option value="about.html">About Us</option>
<option value="contact.html">Contact</option>
</select>
As you can see I have 2 external links. One to Vimeo, the other to Youtube.
When you select Vimeo it works perfectly fine and takes you to the appropriate vimeo page,
but when you select Youtube, it does nothing at all.
I know the URL in the link is correct, I checked it before I posted this.
Anybody know why Youtube wont work when Vimeo will?
Well you're not going to want to hear this, but it worked fine for me... i copied and pasted the code and tested it with Chrome and it went to your page just fine.
You might want to change onChange with window.location.href=this.value
So, the correct code is:
<select onChange="window.location.href=this.value">
<option value="" selected="selected">Navigation</option>
<option value="index.html">Home</option>
<option value="detroitvideoproduction.html">Video Production</option>
<option value="locationsounddetroit.html">Location Sound</option>
<option value="videoeditingdetroit.html">Video Editing</option>
<option value="custommotiongraphicsdetroit.html">Custom Graphics</option>
<option value="demoreel.html">Demo Reel</option>
<option value="http://www.youtube.com/user/VideoDetroitMI?ob=0">You Tube</option>
<option value="http://vimeo.com/liveoutloudproductions">Vimeo</option>
<option value="dslrrentalsdetroit.html">Camera Rental</option>
<option value="lectrosonicsrentalsdetroit.html">Audio Rental</option>
<option value="griprentalsdetroit.html">Grip Rental</option>
<option value="camerasupportdetroit.html">Camera Support</option>
<option value="about.html">About Us</option>
<option value="contact.html">Contact</option>
</select>
Some browsers may be objecting to seeing a ? in the string in a select list. Try converting your YouTube URL using TinyURL. I haven't tested, but I'm guessing that will do the trick.
I am trying to display a multiple select that is disabled and has some options selected. The following fragment works well on Chrome and FF, but I can't seem to see the selected items on IE7. Anyone know a way to make it work?
<select multiple="multiple" disabled="disabled">
<option value="volvo">Volvo</option>
<option value="saab" selected="selected" style="color:white">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi" selected="selected" style="color:white">Audi</option>
</select>
IE7 simply does not support the styling of disabled elements, SELECT especially.