Question

我在这里环顾四周，一无所获，所以我会在这里问。如何检查<select>框中是否选择了某个选项？

这是我迄今为止所做的并且不起作用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="imagetoolbar" content="no" />
    <title>FancyBox 1.3.4 | Demonstration</title>
    <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="scripts/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="scripts/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="scripts/fancybox/jquery.fancybox-1.3.4.css" media="screen" />

    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript">
        $(document).ready(function() {

            $("#various1").fancybox({
        'transitionIn'   :  'fade',
        'transitionOut'  :  'fade',
        'speedIn'        :  300, 
        'height': '300',
        'width': '300',
        'speedOut'       :  300, 
                'opacity'       : true,
                'centerOnScroll': true,
                'autoDimensions': false
            });

        });
    </script>

    <style>
    * {
margin: 0;
padding: 0;
}
    .header {
background:#789FCC;
color:#fff;
font:16px verdana;
font-weight:700;
padding:5px;
margin-bottom:10px;
}
    h3 {
        font-weight: bold;
        font-size: 17px;
        display: block;
         padding:5px;     
    }
    #inline1 {
        padding:0;
        margin:0;  
        font:12px verdana;  
    }    
  #note {
    display:none;
  }
    </style>
    <script type="text/javascript"> 
$(document).ready(function() {

 if ($("#test_now option[value='3']:selected")) {
    alert('Testing');
    $("#note").toggle();
  }

</script>
</head>
<body>

    <a id="various1" href="#inline1">Report Answer</a>


<div style="margin:0;padding:0;display:none;">
<div id="inline1" style="padding:0;marging-top:10px;">

<div class="header"><h3>Testing</h3></div>

Submit this form:

<form method="post" action="x.html">
<select id="test_now" name="why">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>

<br />

<div id="note"><textarea rows="5" cols="20"></textarea></div> 
</form>

</div>  
</div>


</body>
</html>

Answer 1

var selectedValue = $('#test_now').val();
if (selectedValue == '3') {
    // The option 3 is selected
}

但是因为您将此测试直接放在文档中，所以可能会预先选择第一个选项，除非您明确修改标记以预选特定选项：

<select id="test_now" name="why">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3" selected="selected">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

Answer 2

$("#test_now").change(function(){
    var i = $(this).val();
    if(i == "5"){
        console.log("...1");
    }

    //But if you had a dynamically populated select...
    //you could give an option a special ID..and check for that
    if($("#specialOp", this).is(":selected")){
        console.log("...2");
    }

    //or even check for the text in an option
    if($(":contains('Five')", this).is(":selected")){
        console.log("...3");
    }
});

http://jsfiddle.net/G7pB2/

Answer 3


$('#test_now').change(function() {
   if($(this).attr('value') != 0) {
     //Some option has been selected
   }
});

选择了哪个选项并不重要。

<select id="test_now" name="why">
   <option value="0">Select a 'Wh' question</option>  
   <option value="1">One</option>
   <option value="2">Two</option>  
   <option value="3">Three</option>  
   <option value="4">Four</option>  
   <option value="5">Five</option>  
</select>

Answer 4

您也可以使用jQuery选择器来获取所选元素，也许这段代码片段会有所帮助。

$('#test_now').change(function() {

    // not using the object context for clarity
    var selected_option = $('#test_now option:selected');

    if (selected_option.size() == 0) {
        // no option was selected, how was the change event fired?
    }

    // do what ever you want with selected_option here
}

如何检查jQuery中是否选中了某个选择选项

4 个答案: