When I add "multiple" attribute to select menu, it behaves differently & doesnt show all options in a drop down list.
How it looks:
Here's the html code:
<select name="advertLocation" multiple="multiple">
<option value="--Select--">--Select--</option>
<option style="color:#3366cb;" value="Public - No specific target"><b>Public - No specific target</b></option>
<option>Afghanistan</option>
<option>Albania</option>
......
</select>
When adding multiple="multiple" and since you cannot select multiple values in a drop-down list, the browser renders the element as a scrolled list box.
There is nothing you can do to change this behaviour.
Related
I have a very simple <select> dropdown with two child <option>'s:
<div>
<select>
<option
value="defaultPrice"
selected
>Price</option>
<option
value="title"
>Title</option>
</select>
</div>
When I use my mouse and click the select, I am shown the options context menu to select an option:
However, when I use my keyboard and focus the select element, the up and down keys will not bring up the same dialogue, as expected.
However when I add a label to my select, the up and down keys do show the context menu:
<div>
<label for="my-select">Sort order</label>
<select id="my-select">
<option
value="defaultPrice"
selected
>Price</option>
<option
value="title"
>Title</option>
</select>
</div>
Then, if I then add CSS to hide the label, again the dropdown will not show.
This seems to be happening wherever I've been using select drop-downs, and only seems to be an issue in Chrome (v. 77.0.3865.90).
I have no CSS included in the site yet, so it's not a styling issue.
Has anyone else encountered such an issue? Unsure if it's a problem with my markup or a bug with Chrome.
I have an html form element that is a <select> and whenever I add options and specify a value for the options, it adds a space/margin above the form select field. If I modify the code and set all options to value="" then the space/margin goes away.
<select id="authorizenet_cc_type" name="payment[cc_type]" class="required-entry validate-cc-type-select">
<option value="">--Please Select--</option>
<option value="">American Express</option>
<option value="">Visa</option>
<option value="">MasterCard</option>
<option value="">Discover</option>
</select>
The code above gives me:
But when I add values to each option, I get the following result:
How can I fix this to have the values set, but eliminate the space that it creates?
EDIT: It seems like it might be some sort of JavaScript code or something. When the page first loads it's OK for about 1 second, then once the placeholder info loads into all the other input fields, the space pops up.
I am facing an issue with a drop down select in IE11. If the drop down contains one option element it does not expand down while selecting options. The option is overlapping the select which makes it difficult to select.
Example: I have a drop down which consists of element "Ajitesh"
<select> <option> Ajitesh </option> </select>
In the above code whilst selecting "Ajitesh" the drop down is not expanding down .
You could try to contain the single option in an opt-group tag like so:
<select>
<optgroup label="">
<option value="Ajitesh">Ajitesh</option>
</optgroup>
</select>
Otherwise, you could simply add an another - or many - empty option tags like:
<select>
<option value="Ajitesh">Ajitesh</option>
<option value=""></option>
</select>
edit: Please note that this is IE11 (and others) default behaviour, that is, it has been designed to prohibit the use of a dropdown with only one option. If you do not want to add an empty element, there isn't the option of changing the default behaviour of the browser itself - it's just not possible given your circumstances.
I have two drop downs in a search box, a "YearFrom" and a "YearTo".
When nothing has been selected in the "YearFrom", the "YearTo" box looks a little like this :
However the functionality is that once a "YearFrom" is selected, that the "YearTo" fields only offer what is available AFTER the year from. In essence, we end up with HTML like this :
<select>
<option value="">Any</option>
<option value="1950" disabled="disabled" style="display: none;">1950</option>
<option value="1960" disabled="disabled" style="display: none;">1960</option>
...
<option value="2011" style="">2011</option>
<option value="2012" style="">2012</option>
<option value="2013" style="">2013</option>
</select>
So any years below the YearFrom value are hidden. However what we then end up with is the select list looking like this :
So it isn't so much as a drop down, as now a tiny little box with a scroller on the right.
For reference, this doesn't happen in any other browser. e.g. this is how it looks in Firefox.
I've just come across this error as well.
My guess is that the Chrome browser calculates the drop-down height by measuring the heigths of the options and optgroups, but stops calculating the moment it comes across an element that has no height or is display:none.
To work around this in my own code, I dynamically rearrange the options after each update so that display:none elements are at the bottom of the list. it creates another visual bug (white space on right of dropdown) but I can live with that one.
Using HTML, I'm attempting to create a nested dropdown menu, but with no success so far. I placed a dropdown list inside the second item in the first dropdown list, but the inner dropdown list isn't being displayed at all, as seen here:
<select id="myList">
<option></option>
<option>Item 1</option>
<option>Item 2 with a dropdown list inside it
<select id="myList">
<option></option>
<option>Item 1</option>
<option>Item 2</option>
</select>
</option>
</select>
Is it even possible to place one HTML dropdown list inside another HTML dropdown list?
This is not possible, select option cannot contain any other html tags.
Text with eventually escaped characters (like é) are only allowed inside select option.
See Reference
Probably you want to use/create some JS plugin. The below one probably might suit your need.
http://twitter.github.io/bootstrap/javascript.html#dropdowns
You can't have a nested dropdown. The standard dropdown doesn't support arbitrary html, so you have to create your own custom dropdown to achieve this.
One technique is to use a div with z-index and add expand/collapse logic to create the dropdown effect.
I found a JQuery plugin called Droppy, and it appears that it's intended to solve the problem that I've described here.
Dynamic Drive has also produced a similar script with the same purpose.