If your dropdown is something like this: <select id=”thedropdown”> <option value=”1″>one</option> <option value=”2″>two</option> </select> Then you would use something like: var a = document.getElementById(“thedropdown”); alert(a.options[a.selectedIndex].value); But a library like jQuery simplifies things: alert($(‘#thedropdown’).val());
This may not be what you want, but you can get two lines per option, by using the “optgroup” tag e.g: <select> <optgroup label=”Click below for ‘yes'”> <option value=”yes”>Yes</option> </optgroup> <optgroup label=”Click below for ‘No'”> <option value=”no”>No</option> </optgroup> </select>
Updated answer Here is how to change the box model used by the input/textarea/select elements so that they all behave the same way. You need to use the box-sizing property which is implemented with a prefix for each browser -ms-box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; This means that the 2px difference we mentioned earlier does not exist.. … Read more
It is not a good idea to use the index as the key. A key is the only thing React uses to identify DOM elements. What happens if you push an item to the list or remove something in the middle? If the key is same as before React assumes that the DOM element represents … Read more
The rendering of SELECT elements is largely up to the browser, you have very little influence over their presentation. Some browsers obviously allow you more customization than others, IE happens to allow very little (gasp, who’d have thunk ;)). If you need very custom SELECT elements, you’ll need to employ JavaScript or re-create something that … Read more
I figured that this solution works fine for me: Make another select e.g. $(“#footer_canvas”).after(‘<select id=”parkingLot”></select>’); then hide it $(“#parkingLot”).hide(); When you want to ‘hide’ some optgroup, just ‘park’ it in this hidden select. $(‘#VehicleVehicleCategoryId optgroup[label=”kategorie L”]’).appendTo(“#parkingLot”); Same way you can make it visible. This is just the snippets of my solution, that works fine for … Read more
I’m not sure about anyone else, but I’m using the latest stable build of Chrome, and none of the other answers involving .blur() work for me. This question asks the inverse: Programmatically open a drop-down menu The conclusion that seemed to be obtained is that it’s not possible due to the way the browser handles … Read more
Try this code: <select name=”wgtmsr” id=”wgtmsr”> <option value=”kg”>Kg</option> <option value=”gm”>Gm</option> <option value=”pound”>Pound</option> <option value=”MetricTon”>Metric ton</option> <option value=”litre”>Litre</option> <option value=”ounce”>Ounce</option> </select> CSS: #wgtmsr{ width:150px; } If you want to change the width of the option you can do this in your css: #wgtmsr option{ width:150px; } Maybe you have a conflict in your css rules that … Read more
You can do this natively with HTML5 <datalist>: <label>Choose a browser from this list: <input list=”browsers” name=”myBrowser” /></label> <datalist id=”browsers”> <option value=”Chrome”> <option value=”Firefox”> <option value=”Internet Explorer”> <option value=”Opera”> <option value=”Safari”> <option value=”Microsoft Edge”> </datalist>
The good news is, this is possible and in PHP is quite simple really. First we put all of our options and their respective values in an array like so: <?php $options=array(‘Extra, Extra small’=>’xxs’,’Extra small’=>’xs’,’Small’=>’s’,’Medium’=>’m’,’Large’=>’l’,’Extra Large’=>’xl’,’Extra, Extra Large’=>’xxl’); Follow this by opening the select box and calling upon the options array in a foreach loop… … Read more