This question already has answers here:
How to change a <select> value from JavaScript
(12 answers)
Closed 9 years ago.
I'm having issues with setting a default value in a dropdown menu in IE9. It seems to work on other browsers. All my searches yielded people trying to use JQuery to set that attribute. But I'm not using JQuery at all. Here's a sample:
<select id="selectType" name="selectType">
<option label="1" selected="selected">1</option>
<option label="2">2</option>
<option label="3">3</option>
</select>
I forgot to add that the problem is that it's displaying a blank field as the default instead of "1".
That should work just fine, although personally I would take into account that selected is a boolean attribute and therefore its presence is all that is required:
<option label="1" selected>1</option>
That being said, I'm not sure label is a valid attribute there. I'm fairly sure they're inteded for <optgroup> tags. Try removing that attribute.
Related
I need help to show different text upon selection form dropdown without javascript
i tried below code but it also use onchange event .
<div>
<select onchange="if(selectedIndex!=0)document.getElementById('t').innerHTML=options[selectedIndex].value;">
<option value="">< select an option ></option>
<option value="term 1">term 1</option>
<option value="term 2">term 2</option>
<option value="term 3">term 3</option>
</select>
</div>
<div id="t"></div>
I need help from you to have the same functionality but without javascript.
Thanks
Unfortunately this will not be easily possible and even possible with current css 3 and HTML 5 standards.
Actually based on pseudo selectors and elements you can do the checkbox hack
The same checked tag applies and for <option> elements from <select>
So based on this selector you can for example hide the selected element from the <select> with code like in this StackOverflow comment
The main problem here is that based on this pseudo selector you can select only elements that are inside the <select> tag - this means other option tags next to the selected one.
In order to build a selector that selects the element #t from your example you will first need to go out for the options element level and select the <select> tag and look for some element after it that you can try modifying/making visible/invisible with a css. In the current selector specification you are not able to get the parent of some element. See this stackoverflow comment for any updates on that. So as of FEB 2020 you will need again to do this with JS which makes the current effort useless.
This question already has answers here:
How to style a select tag's option element?
(6 answers)
Closed 5 years ago.
I tried to add some letter-spacing to the options of a selectbox. It seems that this do not work. To test if i touch the right element I added some color to the option.
letter-spacing
select {
letter-spacing:10px;
}
option {
letter-spacing: 10px;
color: red;
}
<select class="form-control" name="select" id="myselect">
<option value="105">Option 1</option>
<option value="106">Option 2</option>
<option value="107">Option 3</option>
</select>
If you want to style dropdown selection, you will have to use some js lib to do so... There are many browsers, that complety ignore dropdown styling (in addition - mobile browsers will pop up the dropdown list with system visuals - fonts, sizes, color and so on)
Check out something like this http://www.jqueryscript.net/demo/Easy-jQuery-Based-Drop-Down-Builder-EasyDropDown/
I personally don't recommend trying to style native <select><option> for the sake of visual integrity
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.
This question already has answers here:
Can I apply the required attribute to <select> fields in HTML?
(13 answers)
Closed 8 days ago.
I want to mimic required for select field too. The required field works for select field if the first option is empty. But still i cant see the box which says "please fill out this field"
Is there is a hack or a way i can add the required box to the select field similar like what we have for input field in html5
required attribute works well on <select>. If you want to force user to make a choice here, create an option with blank value (fiddle).
<select name="choice" required>
<option value="">None</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
I'm rendering a drop down box that contains a currently selected value using selected="true".
<select id="dropDown">
<option selected="true" value="1">value2</option>
<option value="2">value3</option>
<option value="3">value4</option>
</select>
Initially the selected value corresponds to the selected="true", but if I play around with the drop down box and then refresh the page the selected="true" is ignored and the displayed value is the last one I chose. I tried using selected="selected" with the same results.
Thanks for your help.
Change your select field to <select id="dropDown" autocomplete="off">
For best browser support it's actually (although it seems so dumb) better to use
autocomplete="nope"
To quote MDN:
In some cases, the browser will keep suggesting autocompletion values
even if the autocomplete attribute is set to off. This unexpected
behavior can be quite puzzling for developers. The trick to really
forcing the no-autocompletion is to assign a random string to the
attribute [...] Since this random value is not a valid one, the browser will give
up.
It's a binary value, not an attribute (for some reason). Use:
<option selected="selected" value="1">value2</option>
or:
<option selected value="1">value2</option>