如何检查是否选择了一个选项?

时间:2012-04-18 16:18:33

标签: jquery select option

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

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

11 个答案:

答案 0 :(得分:229)

<强>更新

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

答案 1 :(得分:26)

您可以通过以下方式获取所选选项:

$('#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元素方法?!

jQuery tag info

中阅读了解您的DOM属性和功能

答案 2 :(得分:3)

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

As seen here

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

修改

正如@gdoron在评论中指出的那样,访问选项的选定属性的更快更合适的方法是通过DOM选择器。以下是显示此操作的小提琴update

if (this.selected == true) {

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

答案 3 :(得分:2)

将此视为您的选择列表:

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

}

答案 4 :(得分:1)

使用

 $("#mySelectBox option:selected");

测试它是否为特定选项myoption

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

答案 5 :(得分:0)

在我的情况下,我不知道为什么选择总是如此。所以我能想到的唯一方法是:

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

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

答案 6 :(得分:0)

如果您只想检查是否选择了某个选项,则无需遍历所有选项。只是做

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

注意:如果您想要选择value = 0的选项,则需要将if条件更改为$('#mySelectBox').val() != null

答案 7 :(得分:0)

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

答案 8 :(得分:0)

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

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

答案 9 :(得分:0)

如果要通过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文件validate.php中,您可以像这样访问

$subject = $_POST['subject'];
echo "selected option is $subject";

答案 10 :(得分:0)

UUID library

编辑:这个答案是有效的,避免了 jQuery 的宗教战争。这个答案的关键是var selectedOption = $("option:selected", #selectIdentifier) <select id="selectIdentifier"> <option>1</option> <option>2</option> <option selected="selected">3</option> </select> 。要回答实际问题,OP 需要在选项之间创建一些区别,以便能够查询天气,选择特定选项。例如,选项本身的 id、data-、value 等装饰。