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

标签 jquery html css

我在这里转了一圈,什么也没找到,所以我会在这里问一下。如何检查是否在 <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>

最佳答案

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

但是因为您将此测试直接放在 document ready 中,所以可能会预选第一个选项,除非您显式修改标记以预选特定选项:

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

关于jquery - 如何检查是否在 jQuery 中选中了某个选择选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5442925/

相关文章:

javascript - jquery修改页面上所有 anchor 标记href并从href属性中提取关键请求参数

javascript - Jquery Expand Collapse all div on Click

javascript - 将网页中选定的一组 div 导出为 PDF 或 Word

html - 在 Bootstrap 上将标题拆分为 2 列(每边 50%)

CSS3 文本动画在重新启动时过快地重叠 First-child

javascript - 如何使用 jQuery 定位表中同一行上的另一个元素

html - Chrome <音频> 播放速率

html - curl 命令到 html 或 vb.net

twitter-bootstrap - 如何在小型设备上放大背景图片

html - 将原点移动到元素的中心?