I created a drop down as
<body>
<div style="height:200px"></div>
<form id="myForm">
<select style="margin-left:200px">
<option value="">Select a vehicle</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
which appears in Internet explorer as normal. That is on click, the dropdown flips down. But if we resize the browser window and click the dropdown, it flips up with the list starting from the top. Is there any css solution for making the dropdown always flips down. Or can we make it using javascript or jquery? And this problem is only with the Internet Explorer.
Related
i have group option like this:
<select name="cars" id="cars">
<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>
but i want to be it like menu
like this:
My form has dropdown lists in the below fashion.
Main category : |Dropdown A|
First sun-category : |Dropdown B|
Second sub-category : |Dropdown C|
Based on |Dropdown C|futher I will populate dropdowns
dropdowns=|Dropdown e| |Dropdown f| |Dropdown g| and so on..
So, based on Dropdown C dropdowns will change.
I can bind Dropdown A| |Dropdown B| |Dropdown C| like this ng-model="main-category",ng-model="sub-category", & ng-model="sub-sub-category" respectively.
But how can I bind |Dropdown e| |Dropdown f| |Dropdown g| , because they keeps on changing whenever there Dropdown C changes?
Sample Code :
Main category:
<select>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
Sub-category
<select>
<option value="d">d</option>
<option value="e">e</option>
<option value="f">f</option>
<option value="g">g</option>
</select>
Sub-sub category
<select>
<option value="h">h</option>
<option value="i">i</option>
<option value="j">j</option>
<option value="k">k</option>
</select>
Based on sub-sub category selection I want to show/hide dropdowns.
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
So, out of above mentioned, few dropdowns will be hidden/shown.
I am saying hidden/shown, because I don't know another way to manage this scenario.
Please help.
I have two HTML drop down
<select>
<option value="">Please Select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="">Please Select</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
Now, If I Select volvo from first drop down and b from second dropdown and then I change to Audi in the first dropdown, I want the value of second drop down to show Please Select instead of b (selected previously) using javascript
PS: I am new to Javascript
It's as easy as:
<select onChange="document.getElementById('secondOption').selectedIndex = 0;">
<option value="">Please Select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select id="secondOption">
<option value="">Please Select</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
You can reset the index supposing you've two <select>
var selects = document.getElementsByTagName('select');
selects[0].onchange = function(){
selects[1].selectedIndex = 0;
}
How do i set the value of an option within an optgroup using DOM and vanilla javascript? Since there are multiple values of A, how do i select 20/A vs 30/A? with...
document.getElementById('logphase').value = "A";
... which would be called at window.onload
<select id="logphase">
<optgroup label="10">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</optgroup>
<optgroup label="20">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</optgroup>
<optgroup label="30">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</optgroup>
<optgroup label="40">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</optgroup>
On my page using Internet explorer I have a drop down but on the first load of the page because it has a onFocus on it, it needs a double click to show menu. How do I avoid the double click.
The onFocus must still fire but the menu must show at the same time?
how do I do this because the double click is irritating?
Here is a simple example
http://jsfiddle.net/tgH7b/3/
here is the code
<select name="cars" >
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
<select name="cars" onFocus="this.style.background = '#999';$(this).click();">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
The only solution i can think of is to use focusin() callback function instead:
NOTE: focusin() supports event bubbling
http://jsfiddle.net/2AUs6/
<select name="cars" >
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
<!-- this one -->
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
$('select[name=cars]:eq(1)').focusin(function(){
$(this).css('background','#999')
})
Here is a possible solution from code project
http://www.codeproject.com/Questions/89610/ASP-NET-how-to-create-a-dropdownlist-that-onfocus