$('#mySelectBox option'). each(function() { if ($(this). isChecked()) alert('this option is selected'); else alert('this is not'); });
You can use the jQuery :selected selector in combination with the val() method to find the selected option value in a select box or dropdown list.
Use document. getElementById('id'). checked method to check whether the element with selected id is check or not. If it is checked then display its corresponding result otherwise check the next statement.
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
You can get the selected option this way:
$('#mySelectBox option:selected')...
LIVE DEMO
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');
});
LIVE DEMO
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
If you're not familiar or comfortable with is()
, you could just check the value of prop("selected")
.
As seen here:
$('#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.
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>
use
$("#mySelectBox option:selected");
to test if its a particular option myoption
:
if($("#mySelectBox option:selected").text() == myoption){
//...
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With