How to check if an option is selected?

小开

最佳答案

更新

对于所选择的选项，一个更直接的 jQuery 方法是:

var selected_option = $('#mySelectBox option:selected');

回答问题 .is(':selected')是你正在寻找的:

$('#mySelectBox option').each(function() {
if($(this).is(':selected')) ...

非 jQuery (可以说是最佳实践)的方法是:

$('#mySelectBox option').each(function() {
if(this.selected) ...

不过，如果您只是在寻找选定的值，请尝试:

$('#mySelectBox').val()

如果要查找选定值的文本，请执行以下操作:

$('#mySelectBox option').filter(':selected').text();

看看 http://api.jquery.com/selected-selector/

下次查找重复的 SO 问题:

获取当前选定的选项或者设置选定选项或者如何在 jQuery 中获得 $(this)选项？或者选项[ select = true ]不起作用

小开

你可以这样得到选择的选项:

$('#mySelectBox option:selected')...

现场演示

但是如果你想迭代所有的选项，使用 this.selected而不是不存在的 this.isChecked:

$('#mySelectBox option').each(function() {
if (this.selected)
alert('this option is selected');
else
alert('this is not');
});

现场演示

更新:

你有很多答案建议你用这个:

很好，它可以做得更快，更容易与 this.selected所以为什么你应该使用它，而不是本地 DOM 元素方法? ！

读取 jQuery中的 了解 DOM 属性和函数

小开

如果您对 is()不熟悉或不熟悉，您可以检查 prop("selected")的值。

如图所示:

$('#mySelectBox option').each(function() {
if ($(this).prop("selected") == true) {
// do something
} else {
// do something
}
});

编辑 :

正如@gdoron 在注释中指出的，访问选项的选定属性的最快和最合适的方法是通过 DOM 选择器。下面是显示此操作的小提琴更新。

if (this.selected == true) {

看起来也不错，谢谢 Gdoron。

小开

使用

 $("#mySelectBox option:selected");

测试它是否是一个特定的选项 myoption:

 if($("#mySelectBox option:selected").text() == myoption){
//...
}

小开

在我的情况下，我不知道为什么选择总是正确的。所以我能想到的唯一办法就是:

var optionSelected = false;
$( '#select_element option' ).each( function( i, el ) {
var optionHTMLStr = el.outerHTML;


if ( optionHTMLStr.indexOf( 'selected' ) > 0 ) {
optionSelected = true;
return false;
}
});

小开

如果只想检查某个选项是否被选中，则不需要遍历所有选项。照做就是了

if($('#mySelectBox').val()){
// do something
} else {
// do something else
}

注意: 如果有一个值为0的选项，希望可以选择，那么需要将 If 条件更改为 $('#mySelectBox').val() != null

小开

把这个作为你的选择列表:

<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>

然后像这样检查选中的选项:

function doSomething(param) {


if ($(param.selected)) {
alert(param + ' is selected!');
}


}

小开

您可以通过 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>

小开

如果您需要检查选项选择的状态为 特定价值:

$('#selectorId option[value=YOUR_VALUE]:selected')

小开

如果你想通过 javascript 检查选择的选项

最简单的方法是在该标记中添加 onchange 属性，并在 js 文件中定义一个函数如果您的 html 文件有类似下面这样的选项，请查看示例

 <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>

现在在 js 文件中添加函数

function subjects(str){
console.log(`selected option is ${str}`);
}

如果要检查 php 文件中的选定选项

只要在标记中给出 name 属性并访问它，就可以访问 php 文件全局变量/数组($_ GET 或 $_ POST)

<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>

在 php 文件 validation.php 中，可以这样访问

$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>

编辑: 这个答案是有效的，并且避免了 jQuery 的宗教战争。这个答案的关键是 :selected。为了回答实际的问题，OP 需要在选项之间创建一些区别，以便能够查询是否选择了特定的选项。例如标识、数据、价值等装饰选项本身。

小开

您还可以在 CSS 中执行双属性选择器

$('[value="your_value"][selected="selected"]')

因此，在选择“ your _ value”时触发:

if( $('[value="your_value"][selected="selected"]') ) {
// do something
}

小开

您可以检查是否选择了值

var selected_option = $('#propertyArea option:selected').val();
if(selected_option){
console.log('selected ...');
console.log(selected_option);
}else{
console.log('not selected');
}

小开

$("#mySelectBox").attr("checked")
? alert("this option is selected")
: alert("this is not");