Question

我选择了2个选项：

<select id="type">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

我想要做的是在设置选项2时显示隐藏的div。

所以我需要从select中获取值，如果它等于2，则显示div。

到目前为止，我对jQuery的尝试如下：

$('#type').on('change', function(){
    if(this.value == 2){
        ('#hiddendiv').show();
    }
})

我包括jQuery，但什么也没发生。

有什么想法吗？

谢谢！

Answer 1

除了显而易见的错误之外，我认为实施应如下所示：因为如果再次选择选项1，您可能想要隐藏div

＆＃13;

//dom ready handler
jQuery(function($) {
  $('#type').on('change', function() {
    $('#hiddendiv').toggle(this.value == 2);
  })
})

＆＃13;

#hiddendiv {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="type">
  <option value="1">One</option>
  <option value="2">Two</option>
</select>
<div id="hiddendiv">hiddendiv</div>

＆＃13;

Answer 2

您缺少$。它工作正常：

$('#type').on('change', function(){
    if(this.value == 2){
        $('#hiddendiv').show(); // you are missing here $
    }
})

#hiddendiv {
    height: 50px;
    width: 50px;
    background: red;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="type">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

<div id="hiddendiv"></div>

Answer 3

好像你错过了很多东西。

试试这段代码：

$(' #type ').on('change', function(){
   if( this.value == 2 ){
       $( '#hiddendiv' ).show();
   }
})

这是DEMO

获取select的值并使用它来显示div jquery

3 个答案: