$('#mySelectBox option').each(function() {
if ($(this).isChecked())
alert('this option is selected');
else
alert('this is not');
});
Apparently, the isChecked doesn't work. SO my question is what is the proper way to do this?
Thanks.
UPDATE
A more direct jQuery method to the option selected would be:
var selected_option = $('#mySelectBox option:selected');
Answering the question .is(':selected') is what you are looking for:
$('#mySelectBox option').each(function() {
if($(this).is(':selected')) ...
The non jQuery (arguably best practice) way to do it would be:
$('#mySelectBox option').each(function() {
if(this.selected) ...
Although, if you are just looking for the selected value try:
$('#mySelectBox').val()
If you are looking for the selected value's text do:
$('#mySelectBox option').filter(':selected').text();
Check out: http://api.jquery.com/selected-selector/
Next time look for duplicate SO questions:
Get current selected option or Set selected option or How to get $(this) selected option in jQuery? or option[selected=true] doesn't work
this.selected can be used instead of $(this).is(":selected") I guess there is no need for a jsperf for this, right? I have nothing against using jQuery!, but use it when you need it, not when it give nothing but overhead and more code. –
Kindred this.selected is completely valid but he asked for the proper jQuery way to do it. –
Rachaba You can get the selected option this way:
$('#mySelectBox option:selected')...
But if you want to iterate all the options, do it with this.selected instead of this.isChecked which doesn't exist:
$('#mySelectBox option').each(function() {
if (this.selected)
alert('this option is selected');
else
alert('this is not');
});
Update:
You got plenty of answers suggesting you to use this:
$(this).is(':selected') well, it can be done a lot faster and easier with this.selected so why should you use it and not the native DOM element method?!
Read Know Your DOM Properties and Functions in the jQuery tag info
this.selected. I agree with your comments about jQuery overuse/abuse. Part of knowing jQuery, is knowing when to not use it. That said, keep in mind that the ':selected' selector is a custom Sizzle selector, so using it disables the use of querySelectorAll in supported browsers. It's certainly not the end of the world, since it provides some nice, short code, but I personally tend to avoid the Sizzle-only stuff. –
Viddah :)). There are a lot of people who can make SO better, let them do it. Saved nerves should be much important for you. Come on, friend ;) –
Landahl You can use this way by jquery :
$(document).ready(function(){
$('#panel_master_user_job').change(function () {
var job = $('#panel_master_user_job').val();
alert(job);
})
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="job" id="panel_master_user_job" class="form-control">
<option value="master">Master</option>
<option value="user">User</option>
<option value="admin">Admin</option>
<option value="custom">Custom</option>
</select>If you're not familiar or comfortable with is(), you could just check the value of prop("selected").
$('#mySelectBox option').each(function() {
if ($(this).prop("selected") == true) {
// do something
} else {
// do something
}
});
Edit:
As @gdoron pointed out in the comments, the faster and most appropriate way to access the selected property of an option is via the DOM selector. Here is the fiddle update displaying this action.
if (this.selected == true) {
appears to work just as well! Thanks gdoron.
$(this).prop("selected") instead of this.selected ?! what does it give you??! p.s. I'm not the downvoter... –
Kindred is is best used for but I like accessing my properties by prop and attr. In most scenarios it may well be just a matter of taste. Yes, there is a curious rash of down-voting! –
Resistless jQuery tag info. there is no reason to use slower code + more code to do simple thing. .is() should be used for complicated selector like $(...).is('.foo > [name="aaa"] input') or for properties that are not native DOM elements properties like $(...).is(":visiable"). –
Kindred $(this).is(':selected') to be accepted. Stackoverflow should be used to learn best practices, not common mistakes...) –
Kindred use
$("#mySelectBox option:selected");
to test if its a particular option myoption:
if($("#mySelectBox option:selected").text() == myoption){
//...
}
myoption ??? –
Kindred Consider this as your select list:
<select onchange="var optionVal = $(this).find(':selected').val(); doSomething(optionVal)">
<option value="mostSeen">Most Seen</option>
<option value="newst">Newest</option>
<option value="mostSell">Most Sell</option>
<option value="mostCheap">Most Cheap</option>
<option value="mostExpensive">Most Expensive</option>
</select>
then you check selected option like this:
function doSomething(param) {
if ($(param.selected)) {
alert(param + ' is selected!');
}
}
If you need to check option selected state for specific value:
$('#selectorId option[value=YOUR_VALUE]:selected')
$("#mySelectBox").attr("checked")
? alert("this option is selected")
: alert("this is not");
In my case I don't know why selected is always true. So the only way I was able to think up is:
var optionSelected = false;
$( '#select_element option' ).each( function( i, el ) {
var optionHTMLStr = el.outerHTML;
if ( optionHTMLStr.indexOf( 'selected' ) > 0 ) {
optionSelected = true;
return false;
}
});
If you only want to check if an option is selected, then you do not need to iterate through all options. Just do
if($('#mySelectBox').val()){
// do something
} else {
// do something else
}
Note: If you have an option with value=0 that you want to be selectable, you need to change the if-condition to $('#mySelectBox').val() != null
If you want to check selected option through javascript
Simplest method is add onchange attribute in that tag and define a function in js file see example if your html file has options something like this
<select onchange="subjects(this.value)">
<option>Select subject</option>
<option value="Computer science">Computer science</option>
<option value="Information Technolgy">Information Technolgy</option>
<option value="Electronic Engineering">Electronic Engineering</option>
<option value="Electrical Engineering">Electrical Engineering</option>
</select>
And now add function in js file
function subjects(str){
console.log(`selected option is ${str}`);
}
If you want to check selected option in php file
Simply give name attribute in your tag and access it php file global variables /array ($_GET or $_POST) see example if your html file is something like this
<form action="validation.php" method="POST">
Subject:<br>
<select name="subject">
<option>Select subject</option>
<option value="Computer science">Computer science</option>
<option value="Information Technolgy">Information Technolgy</option>
<option value="Electronic Engineering">Electronic Engineering</option>
<option value="Electrical Engineering">Electrical Engineering</option>
</select><br>
</form>
And in your php file validation.php you can access like this
$subject = $_POST['subject'];
echo "selected option is $subject";
var selectedOption = $("option:selected", #selectIdentifier)
<select id="selectIdentifier">
<option>1</option>
<option>2</option>
<option selected="selected">3</option>
</select>
EDIT: This answer is valid and avoids the religious wars of jQuery or not. The key in this answer is :selected. To answer the actual question the OP needs to have created some differentiation between options to be able to query weather a specific option is selected. eg id, data-, value etc. decoration on the options themselves.
You can also do a double attribute selector in CSS
$('[value="your_value"][selected="selected"]')
So to fire when "your_value" is selected:
if( $('[value="your_value"][selected="selected"]') ) {
// do something
}
You can check if selected or not with value
var selected_option = $('#propertyArea option:selected').val();
if(selected_option){
console.log('selected ...');
console.log(selected_option);
}else{
console.log('not selected');
}
$(document).ready(function(){
$('#panel_master_user_job').change(function () {
var job = $('#panel_master_user_job').val();
alert(job);
})
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="job" id="panel_master_user_job" class="form-control">
<option value="master">Master</option>
<option value="user">User</option>
<option value="admin">Admin</option>
<option value="custom">Custom</option>
</select>© 2022 - 2024 — McMap. All rights reserved.
this.selected) that you should bypass using jQuery ($(this).prop("selected")) but they will both work for you. – Resistless