If you don’t mind modifying your HTML a little to include the value attribute of the options, you can significantly reduce the code necessary to do this: <option>B</option> to <option value=”B”>B</option> This will be helpful when you want to do something like: <option value=”IL”>Illinois</option> With that, the follow jQuery will make the change: $(“select option[value=”B”]”).attr(“selected”,”selected”); … Read more
You can accomplish this by using the <datalist> tag in HTML5. <input type=”text” name=”product” list=”productName” /> <datalist id=”productName”> <option value=”Pen”>Pen</option> <option value=”Pencil”>Pencil</option> <option value=”Paper”>Paper</option> </datalist> If you double click on the input text in the browser a list with the defined option will appear.
Nothing is impossible. Here’s a solution that simply sets the value of a text input whenever the value of the <select> changes (rendering has been tested on Firefox and Google Chrome): .select-editable {position:relative; background-color:white; border:solid grey 1px; width:120px; height:18px;} .select-editable select {position:absolute; top:0px; left:0px; font-size:14px; border:none; width:120px; margin:0;} .select-editable input {position:absolute; top:0px; left:0px; width:100px; padding:1px; … Read more
I think you want this format: select(“model_name”, “model_id”, Model.all.collect {|mt| [ mt.name, mt.id ] }, {:include_blank => ‘name of your blank prompt’}) BTW: was assuming Modle was suppose to be Model. To use using collection_select: collection_select(:model, :model_id, Model.all, :id, :name, :prompt => true)
This will do it for you: var yourSelect = document.getElementById( “your-select-id” ); alert( yourSelect.options[ yourSelect.selectedIndex ].value )
I know this is an older post, but I’m leaving this for whomever else comes looking in the future. You can’t format line breaks into an option; however, you can use the title attibute to give a mouse-over tooltip to give the full info. Use a short descriptor in the option text and give the … Read more
I don’t think you can but you can easily reproduce the visual style with css and thus only have options in your select, so everything is selectable. .optionGroup { font-weight: bold; font-style: italic; } .optionChild { padding-left: 15px; } <select multiple=”multiple”> <option value=”0″ class=”optionGroup”>Parent Tag</option> <option value=”1″ class=”optionChild”>Child Tag</option> <option value=”2″ class=”optionChild”>Child Tag</option> </select> The … Read more
You’re probably looking for an <optgroup>: <select> <optgroup label=”CITY 1″> <option>City 1 branch A</option> <option>City 1 branch B</option> <option>City 1 branch C</option> </optgroup> <optgroup label=”CITY 2″> <option>City 2 branch A</option> <option>City 2 branch B</option> </optgroup> </select> Demo: http://jsfiddle.net/Zg9Mw/ If you do need to make regular <option> elements unselectable, you can give them the disabled attribute … Read more
You’re overthinking it: var country = document.getElementById(“country”); country.options[country.options.selectedIndex].selected = true;
One more way – just add a selected = “selected” attribute to the select markup and call select2 on it. It must take your selected value. No need for extra JavaScript. Like this : Markup <select class=”select2″> <option id=”foo”>Some Text</option> <option id=”bar” selected=”selected”>Other Text</option> </select> JavaScript $(‘select’).select2(); //oh yes just this! See fiddle : http://jsfiddle.net/6hZFU/ … Read more