Select a value in a specific optgroup - javascript

I have a select with multiple optgroups
For example
<select id="Numbers">
<option value="0">Select One</option>
<optgroup label="A" id="A">
<option value="123">123</option>
<option value="456">456</option>
</optgroup>
<optgroup label="B" id="B">
<option value="123">123</option>
<option value="456">456</option>
</optgroup>
</select>
Since the values in both optgroups are the same, is there a way to select an option depending on its optgroup?
So I want to select the option with the value of "123" in optgroup with the id of "B"

As you have provided id B. You can use ID selector and Attribute Value Selector
You can use
$('#B option[value="123"]').prop('selected', true)
DEMO

Using jquery you can limit the selection to the children of the optgroup you want. In this case:
$("optgroup#B > option[value='123']").attr("selected", "selected");
Should do the trick.

SORRY, THOUGHT THEY WERE CHECKBOXES. THIS WILL NOT WORK.
Do you mean automatically show it as checked, on loading the page? If so use jQuery:
$("#B").children('.myCheckbox').prop('checked', true);

Related

Select a select option element without a "selected" attribute

So here is the thing:
I have a java app and it creates a group of selects based on a db. Also, if it happens that an element (let's call it product) has that value, it print the option with the selected attribute.
<select>
<option value="1">text1</option>
<option value="2" selected>text2</option>
<option value="3">text3</option>
<option value="4">text4</option>
<option value="5">text5</option>
</select>
<select>
<option value="1">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
</select>
<select>
<option value="1">text1</option>
<option value="2">text2</option>
</select>
What i want to do is set in blank (set a value of zero) to the selects that not has an element with a selected value.
If you know another form to set to blank a list (diferent from put a default empty element in every select), please let me know.
The way to do this without an empty option, is to set the selectedIndex to -1
$('select:not(:has(option[selected]))').prop("selectedIndex", -1);
FIDDLE
Demo $('option:not(:selected)').val(0); use :not and :selected and set the value to 0

How to get all select elements having their with multiple selection criteria, jquery?

How to get all dropdowns having on the basis of multiple attributes name and value.
$('input[name="ABC"][value="-1"]') this expression seems to work, but for drop downs this doesn't seems working.
<select name="department" />
<option value="-1" selected="selected">Select One</option>
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
</select>
alert($("select[name=department][value=-1]").length);
gives 0 in alert box.
refer to this fiddle.
http://jsfiddle.net/8QBH7/
alert($("select[name=department] option[value=-1]").length);
I believe this is the query you're looking for:
$("select[name='department'] option[value=-1]")
See fiddle demo
Edit based on your feedback I think you want to use the selected pseudo class. Fiddle
alert($("select[name=department] :selected").val());
$("select").on("change",function(){
alert($("select[name=department] :selected").val());
});

Select the first enabled option in a select element

How could I set the value of a select element to the first enabled option?
Say I have html like this:
<select name="myselect" id="myselect">
<option value="val1" disabled>Value 1</option>
<option value="val2">Value 2</option>
<option value="val3" disabled>Value 3</option>
<option value="val4">Value 4</option>
</select>
How could I select the first option which isn't disabled (here it would be val2)?
Try this selecting the first option that is enabled.
$('#myselect').children('option:enabled').eq(0).prop('selected',true);
.children() for finding the list of option that is enabled , .eq(0) choosing the first entry on the list and using .prop() to select the option

option:first-child isn't selecting the same in all cases

Why doesn't this work when a select has optgroups in it?
doesn't work
$("option:first-child").attr("selected", "selected");
works
$("select>option:first-child").attr("selected", "selected");
When I do $("select:eq(1) option:first-child").val() it appears to be getting the right option, but when I call attr() it isn't picking the right one.
Example: http://jsfiddle.net/7J2Yb/
If you check the value of $("option:first-child").length you will notice that it is 5. :first-child is selecting options that are the first child of their parent, which are:
<SELECT id='a'>
<OPTION selected value=0>(all)</OPTION><!-- THIS ONE -->
<OPTION value=1>A</OPTION>
<OPTION value=2>B</OPTION>
<OPTION value=3>C</OPTION>
</SELECT>
<SELECT id='b'>
<OPTION selected value=0>(all)</OPTION><!-- THIS ONE -->
<optgroup label="A">
<OPTION value=1>A</OPTION><!-- THIS ONE -->
</optgroup>
<optgroup label="B">
<OPTION value=2>B</OPTION><!-- THIS ONE -->
</optgroup>
<optgroup label="C">
<OPTION value=3>C</OPTION><!-- THIS ONE -->
</optgroup>
</SELECT>
Furthermore $("select:eq(1) option:first-child").length is equal to 4 for the same reason above. Calling .val() on the array outputs the first elements value, but the selector is selecting all 4 of them.
If you want to select the first element in each select write:
$("select").find("option:first").attr("selected", true);
working example: http://jsfiddle.net/hunter/7J2Yb/2/

select box manipulation

I would like to dynamically change the option value of a select tag. Is this possible? When I say value, I mean the "Change Me" portion. If this is possible, can someone please show me how?
<option value="0">Change Me</option>
You can fetch and modify the combobox item's text as follows:
$("#MyCombo option:selected").text()
Note: #shaz; thanks for your comment, my mistake!
Yes it is possible
You will need to look at the options available using a select tag.
<select id='selection'>
<option value='0'>Value 0</option>
<option value='1'>Value 1</option>
<option value='2'>Value 2</option>
<option value='3'>Value 3</option>
<option value='4'>Value 4</option>
<option value='5'>Value 5</option>
</select>
the javascript
var select = document.getElementById('selection');
// to get the currently selected item, use the `selectedIndex` property.
var index = select.selectedIndex; // 3 in case of value 2 selected
// to change its text
select.options[index].innerHTML = 'the new value';
is this what u are looking for?

Categories

Resources