Need some help here. I inherited this code and I am not 100% on what needs to be done here but I need to set the default selected item to be the first group/first option instead of the data-placeholder.
I tried using ng-init but I wasn't able to get it to work.
How can I achieve this with the below code?
<div ng-repeat='searchField in searchFields.device'>
<select data-placeholder='Search Field' ng-model='searchField[0]' ui-select2>
<option value=''></option>
<optgroup label='FooGroup1'>
<option value='foo_option1'>foo_option1</option>
</optgroup>
<optgroup label='FooGroup2'>
<option value='foo_option1'>foo_option1</option>
<option value='foo_option1'>foo_option1</option>
</optgroup>
</select>
....
ACTUAL HAML
%div(ng-repeat="searchField in searchFields.message")
%select(ng-model="searchField[0]" ui-select2 data-placeholder="Search Field" ng-init="searchField[0] = ")
%option(value="")
- devices_optgroup.each do |group, attrs|
%optgroup{label: group}
- attrs.each do |attr, label|
%option(value="#{attr}")= label
The <option> element allows for an optional selected attribute. From MDN:
selected
If present, this Boolean attribute indicates that the option is initially selected. If the element is the descendant of a element whose multiple attribute is not set, only one single of this element may have the selected attribute.
So if you want to select the first element of the first <optgroup> you can do something like this:
<select data-placeholder='Search Field' ng-model='searchField[0]' ui-select2>
<option value=''></option>
<optgroup label='FooGroup1'>
<option value='foo_option1' selected>foo_option1</option>
</optgroup>
<optgroup label='FooGroup2'>
<option value='foo_option1'>foo_option1</option>
<option value='foo_option1'>foo_option1</option>
</optgroup>
</select>
Related
I am trying to create a input-box where the available anwsers ar listed in a list below. This I can do but i am not able to sort the available anwsers in optgroups. When the code runs the anwsers is listed without the optgroups.
Is it at all possible to use optgroups in datalists or is optgroups exclusive to select elements?
Here is a code sample where the optgroups is not shown
<label>Välj en elbil
<input class="downdrop" id="valdModellCompare2" list="elfordon" onchange=getSelectValue();></label>
<datalist id="elfordon">
<optgroup value="Elbilar">elbil
<option value="teslas">Tesla Model S</option>
<option value="teslax">Tesla Model X</option>
<option value="tesla3">Tesla Model 3</option>
<option value="i3">BMW i3</option>
<option value="id3">Volkswagen ID.3</option>
<option value="id4">Volkswagen ID.4</option>
<option value="niro">KIA Niro</option>
<option value="etron">Audi e-Tron</option>
<option value="polestar">Polestar 2</option>
<option value="xc40e">Volvo XC40 Recharge</option>
<option value="leaf">Nissan Leaf</option>
<option value="taycan">Porsche Taycan</option>
</optgroup>
<optgroup value="Plug-in Hybrider">hybrid
<option value="outlander">Mitsubitshi Outlander Hybrid</option>
<option value="v60hybrid">Volvo V60 twin engine</option>
<option value="optima">KIA Optima SV</option>
<option value="passatgte">Volkswagen Passat GTE</option>
<option value="priushybrid">Toyota Prius Hybrid</option>
<option value="golfgte">Volkswagen Golf GTE</option>
<option value="x545e">BMW X5 45e</option>
<option value="530e">BMW 530e</option>
</optgroup>
</datalist>
As the documentation says for <optgroup> :
Permitted parents: A <select> element.
There are no other elements mentioned as permitted parents. Therefore optgroup is exclusively a child of select.
While optgroups is exclusively a child of select, select can be a child of datalist!
Although it is not the cleanest solution, you can use a trick used for compatibility of browsers that don't support datalist https://html.spec.whatwg.org/multipage/form-elements.html#the-datalist-element
In the more elaborate case, the datalist element can be given contents that are to be displayed for down-level clients that don't support datalist. In this case, the option elements are provided inside a select element inside the datalist element.
With the addition of value="" readonly to an option displaying the optgroup name. So that it is not possbile to select it.
<label>Välj en elbil
<input class="downdrop" id="valdModellCompare2" list="elfordon" onchange=getSelectValue();></label>
<datalist id="elfordon">
<label> Select from the list:
<select name="car">
<optgroup value="Elbilar">elbil
<option value="" readonly>Elbilar</option>
<option value="teslas"> >Tesla Model S</option>
<option value="teslax"> >Tesla Model X</option>
<option value="tesla3"> >Tesla Model 3</option>
<option value="i3"> >BMW i3</option>
</optgroup>
<optgroup value="Plug-in Hybrider">hybrid
<option value="" readonly>Plug-in Hybrider</option>
<option value="outlander"> >Mitsubitshi Outlander Hybrid</option>
<option value="v60hybrid"> >Volvo V60 twin engine</option>
<option value="optima"> >KIA Optima SV</option>
</optgroup>
</select>
</label>
</datalist>
I want to select every <option> tag below the first one, and I only want the text between the value and </option>. I've tried to do the following;
$('#attributesize-size_uswomen > option')
However it gives me the first <option> only. I want to exclude the first <option> tag and get the values. This is the block of HTML I want it from.
I would like to obtain the 'source' sizes, i.e. 6, 6.5, etc. Thanks
<select name="size_attribute[size]" id="attributesize-size_uswomen" class="size-attribute-select">
<option>Choose Your Size</option>
<option value="12773" source="16004">5.5</option>
<option value="12774" source="16006">6</option>
<option value="12775" source="16008">6.5</option>
<option value="14805" source="16010">7</option>
<option value="14809" source="16012">7.5</option>
<option value="12749" source="16014">8</option>
<option value="14816" source="16016">8.5</option>
<option value="14820" source="16018">9</option>
<option value="14824" source="16020">9.5</option>
<option value="15175" source="16022">10</option>
<option value="15178" source="16024">10.5</option>
<option value="15184" source="16028">11.5</option>
<option value="15187" source="16030">12</option>
</select>
As #freedomn-m suggested you can use this:
$('#attributesize-size_uswomen > option:not(:first)').map(function() {
return $(this).text();
}).get();
to get array of values from all options, except the first one. But better selector is this:
'#attributesize-size_uswomen > option[value]'
that will work when you use empty option or not. (it will get all options that have the value attribute).
I know an answer exists for setting a default value for an HTML select dropdown element.
<select>
<option value="" selected="selected">an option value</option>
</select>
However, I need the placeholder to not be a 'choose-able' value. Such as 'Select a category'. How can this be done?
Just disable the default option:
<select>
<option value="" selected="selected" disabled="disabled">an option value</option>
<option value="">first choosable option</option>
</select>
I have a select dropdown menu and I want the placeholder text to read 'Position'
<select id="playingPosition" value="Position">
<option value="goalkeeper">Goalkeeper</option>
<option value="defender">Defender</option>
<option value="midfielder">Midfielder</option>
<option value="striker">Striker</option>
</select>
When the page loads, 'Goalkeeper' will be displayed before any user input. I have tried to rename this to 'Position' using the value attribute.
http://jsfiddle.net/bHJM2/
You can do something like this:
<option value="" disabled selected>Select your option</option>
This becomes:
<select name="playingPosition" id="playingPosition" value="Position">
<option value="" disabled selected>Select your option</option>
<option value="goalkeeper">Goalkeeper</option>
<option value="defender">Defender</option>
<option value="midfielder">Midfielder</option>
<option value="striker">Striker</option>
</select>
Looks like:
And we're done.
Set the selected attribute on the option element you want to select like this:
<option value="defender" selected>Defender</option>
How to set the first value that comes in the dropdown list as the default value in php? The first value should be by default selected when i open my page
This can be achievable using selected attribute of selectbox:
<select name="youselectbox">
<option value="1" selected>Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
Edit :
Give your selectbox a id say "selectme"
<select name="youselectbox" id="selectme">
Then on load use this jQuery :
$(document).ready(function()
{
$("#selectme").prop("selectedIndex", 0); // here 0 means select first option
});
For more information SEE and FIDDLE DEMO
With selected attribute within the option tag, you set the selected default value of your drop-down.
<select>
<option value="volvo" selected>Volvo</option> # default selected option
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi">Audi</option>
</select>
EDIT :
For Dynamic Drop-down menu: PHP Code as below
$("#target option:first").attr('selected','selected');
When setting attr selected doesn't work if there's already a selected attribute. The code I use now will first unset the selected attribute, then select the first option.
$('#target').removeAttr('selected').find('option:first').attr('selected', 'selected');