Question

我想知道如何根据特定的选择值在jQuery中触发事件。所以，例如我有一个小的选择和div这样：

<select id="sweets">
  <option value ="Option1">Option 1</option>
  <option value ="Option2">Option 2</option>
  <option value ="Option3">Option 3</option>
</select>
<div id='showthis'>You have selected option 2</div>

我想做点什么;

如果用户选择选项2，

$('#showthis').show();

如果用户选择任何其他选项，

$('#showthis').hide();

我是jQuery的新手，我不知道如何根据特定的选择值进行更改事件。任何帮助将不胜感激。

Answer 1

$('#sweets').change(function(){
    var show = $(this).val() == 'Option2';
    $('#showthis').toggle(show);
});

Answer 2

你试过这个吗？

$('#sweets').change(function() {
    if($(this).attr('value') == 'Option1') {
        // do something
    } else if($(this).attr('value') == 'Option2') {
        // do something else
    } // etc..
}

Answer 3

$('#sweets').change(function() {
    if( this.selectedIndex === 1 ) {
         $('#showthis').show();
    } else {
         $('#showthis').hide();
    }
});

或更好：

$('#sweets').change(function() {
    $('#showthis').toggle( this.selectedIndex === 1 );
});

selectedIndex属性是引用所选选项的一种非常快捷的方式。

使用toggle()^(docs)方法，您可以将布尔值作为开关参数传递给true == show和false == hide。

或者按价值来做，你可以这样做：

$('#sweets').change(function() {
    var val = this.options[ this.selectedIndex ].value;
    $('#showthis').toggle( val === 'Option1' );
});

使用jquery在特定选择值上的事件处理程序

3 个答案: