如何检查一个选项是否被选中？

Question

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

显然，isChecked 不起作用。所以我的问题是这样做的正确方法是什么？ 谢谢。

Answer 1

var selectedOption = $("option:selected", #selectIdentifier)

<select id="selectIdentifier">
<option>1</option>
<option>2</option>
<option selected="selected">3</option>
</select>

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

Answer 2

如果您想通过 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 文件全局变量 /array ($_GET 或 $_POST) 如果您的 html 文件是这样的，请查看示例

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

Answer 3

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

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

Answer 4

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

Answer 5

将此作为您的选择列表：

<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!');
    }

}

Answer 6

如果你只想检查一个选项是否被选中，那么你不需要遍历所有选项。做吧

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

注意：如果您希望选择 value=0 的选项，则需要将 if-condition 更改为 $('#mySelectBox').val() != null

Answer 7

就我而言，我不知道为什么 selected 总是正确的。所以我能想到的唯一方法是：

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

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

Answer 8

更新

选择选项的更直接的 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 问题：

Get current selected option 要么 Set selected option 要么 How to get $(this) selected option in jQuery? 要么 option[selected=true] doesn't work

Answer 9

您可以通过这种方式获得选定的选项：

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

LIVE DEMO

但如果您想迭代所有选项，请使用 this.selected 而不是 this.isChecked，后者不存在：

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

LIVE DEMO

更新：

你有很多答案建议你使用这个：

$(this).is(':selected') 好吧，使用this.selected 可以更快更轻松地完成，那么为什么要使用它而不是原生 DOM 元素方法呢？！

阅读jQuerytag info中的了解你的DOM属性和函数

Answer 10

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

As seen here：

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

编辑：

正如@gdoron 在 cmets 中指出的那样，访问选项的 selected 属性的更快和最合适的方法是通过 DOM 选择器。这是显示此操作的小提琴update。

if (this.selected == true) {

似乎也能正常工作！谢谢gdoron。

Answer 11

使用

 $("#mySelectBox option:selected");

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

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