2011-03-26 82 views
0

我环视这里并没有发现任何东西,所以我会在这里问一下。如何检查<select>框中是否选择了某个选项?如何检查某个选择选项是否在jQuery中被选中

这里是我到目前为止并不起作用:

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

回答

1
$("#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/

+0

谢谢! :) – nn2 2011-03-26 15:43:42

2
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> 
+0

对不起,但我把'警报('测试');'在IF语句之间,它没有工作。 :( – nn2 2011-03-26 14:56:16

+0

甚至没有这个'$(“#test_now”)。live(“click”,function(){'worked ... – nn2 2011-03-26 14:59:04

+0

啊哈!我知道了!以下是我使用的:http://pastebin.com/ K21L1rpR因为你把我带到答案 - 谢谢!D – nn2 2011-03-26 15:02:29

0

$('#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> 
0

您也可以使用jQuery选择器来获取选定的元素,这个代码片段可能会有所帮助。

​​
+0

请记住,如果您的最终JavaScript代码包含对console.log()的调用,该调用不在IE或Firebugged Firefox中,那么您的页面将会中断。一旦您引用不存在的JavaScript,JavaScript执行就会停止安慰。 – macguru2000 2011-03-26 16:01:40

相关问题