I have a multiselect option of JQuery:
<select multiple="multiple" id="add_remove_user_segment" size="5" name="add_remove_user_segment[]">
<optgroup label="test">
<option value="test1">
test1
</option>
<option value="test2">
test2
</option>
<option value="test3">
test3
</option>
</optgroup>
<optgroup label="op1">
<option value="op1">
op1
</option>
<option value="op2">
op2
</option>
<option value="op3">
op3
</option>
</optgroup>
</select>
However whatever I select in javascript the following line of code gives me null! Why is that?
alert($("#add_remove_user_segment").val());
If my question is not clear please let me know!
#my_Selelect isn't the ID of your <select>, it's #add_remove_user_segment
Update:
It's returning null because it's running without anything being selected. Here is a fiddle to demonstrate that you need an onchange event to grab the value (or at the very minimum, try grabbing the value ONLY when something is selected)
http://jsfiddle.net/Dtxjv/1/
add_remove_user_segment has no value until you select one.
Your jQuery runs at document load before a value can be selected.
You need to test for on change or add a delay. demo here
http://codepen.io/lpoulter/pen/ukmwy
Related
I have reasons for rescheduling job and also sub-reason under a reason. I want that on selecting the reason, its sub-reason should appear. How do I do that?
<select>
<option value="" disabled="disable" selected="selected">
Select Reason
</option>
<option ng-repeat="reasons in Resonse_schedule ">
{{reasons.reasons}}
</option>
</select>
Use ng-options
AngularJS provides a directive ng-options to dynamically list down the options
<select ng-options="reason.reason as reason.reason for reason in Resonse_schedule">
<option value="" selected disabled >Select Reason</option>
</select>
I would suggest you to go through the documentation of ngOptions to understand it better
You can use this:
<select ng-model="reasonVar" ng-options="reason as reason.name for reason in Resonse_schedule">
<option value="" disabled="disable" selected="selected">Select Reason
</option>
</select>
<select ng-model="reasonSelected">
<option ng-repeat="subReason in reasonVar.subReasons" value="subReason.name">
{{subReason.name}}
</option>
</select>
Where reasonVar is the selected value from the Resonse_schedule list.
Here's a working example for this code:
http://jsfiddle.net/U3pVM/35122/
And here's more complicated one:
http://jsfiddle.net/miparnisari/u50hgn5a/
I am looking for a way to select an option from a drop down list using the item class, and containing text. For example
<select class="mySelect">
<option value="Test 1">Test 1</option>
<option value="Test 2">Test 2</option>
<option value="Test 3">Test 3</option>
</select>
I cannot use the select ID because it might change, but the class will always be the same. I want to do, if option has the word Test, make the color of the word "Test" blue.
I think I can handle the color assignment, but what I am having an issue with is using the class to select the child options. I have tried:
$('.mySelect option:contains("Test")');
However I get an error that this is not a valid selector.
I also tried:
$('.mySelect select option:contains("Test")');
Finally, thanks to comments, I tried
$('select option[value*="Test"]')
However, this only returns the first item.
OK, here is the actual code in production, lets see if this changes anything.
<select onclick="SetChoiceOption('ctl00_ctl40_g_6a07f243_6d33_4cb8_bf98_47743415ee4a_ctl00_ctl05_ctl05_ctl00_ctl00_ctl05_ctl00_DropDownButton')" name="ctl00$ctl40$g_6a07f243_6d33_4cb8_bf98_47743415ee4a$ctl00$ctl05$ctl05$ctl00$ctl00$ctl05$ctl00$DropDownChoice" id="ctl00_ctl40_g_6a07f243_6d33_4cb8_bf98_47743415ee4a_ctl00_ctl05_ctl05_ctl00_ctl00_ctl05_ctl00_DropDownChoice" title="Category: Choice Drop Down" class="ms-RadioText">
<option selected="selected" value=""></option>
<option value="Meeting Test">Meeting Test</option>
<option value="Work hours Test">Work hours Test</option>
<option value="Business Test">Business Test</option>
<option value="Holiday Test">Holiday Test</option>
<option value="Get-together Test">Get-together Test</option>
<option value="Gifts Test">Gifts Test</option>
<option value="Birthday Test">Birthday Test</option>
<option value="Anniversary Test">Anniversary Test</option>
</select>
Here is a fiddle that returns each as text, but, somehow does not return the elements.
https://jsfiddle.net/3hgpw778/
$('.mySelect option:contains("Test")'); is valid and is selecting the three options. but as an alternative you can try this:
$('select option[value^="Test"]')
$$('select option[value*="Test"]');
was the answer. I got the additional piece from Simple jQuery selector only selects first element in Chrome..?
I've got a select element, like this:
<select id="fieldName"
class="form-control"
ng-model="condition.type">
<option value="{{constants.TYPE_SORT_BY_SENDER}}">
{{locale('Sender')}}
</option>
<option value="{{constants.TYPE_SORT_BY_RECIPIENT}}">
{{locale('Receiver')}}
</option>
<option value="{{constants.TYPE_SORT_BY_DATE}}">
{{locale('Date')}}
</option>
<option value="{{constants.TYPE_SORT_BY_ATTACHMENT}}">
{{locale('Has attachment')}}
</option>
<option value="{{constants.TYPE_SORT_BY_SUBJECT}}">
{{locale('Subject')}}
</option>
</select>
constants object is defined in $rootScope on $stateChangeStart event, so when I look on this element using firebug it looks ok.
But the problem is that this select is not selecting the correct option on page load: if I change a constant to the number it works fine.
I don't want to have any magic numbers in my template, but I can't get this select to work.
What should I do here?
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);
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?