jquery - 根据两个选择输入显示 div

Question

如果两个选择输入之一设置为特定选项，我有一个要显示的 div。

<select id="firstChoice">
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
</select>

<select id="secondChoice">
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
</select>

<div class="additional">
     ...
</div>

如果任一选择设置为选项 1，则 div 应显示，否则应隐藏。

小提琴

[编辑] 为了简明扼要，并且由于我尝试过的非常糟糕，我没有发布我所做的事情。对此表示歉意。我已经用以下答案之一的修改版本更新了上面的小提琴。谢谢。

Answer 1

这是你想要的？如果其中任何一个是选项 1，则 div 会显示，否则会再次隐藏它。

$(document).ready(function () {
    $('#firstChoice').on('change', function () {
        checkToShow();
    });
    $('#secondChoice').on('change', function () {
        checkToShow();
   });
});

function checkToShow(){
    if ($('#firstChoice').val() == 'Option 1' || $('#secondChoice').val() == 'Option     1') {
    $('.additional').css("display", "block");
    }
    else{
        $('.additional').css("display", "none");
    }
}

小提琴

Answer 2

var $select = $('#firstChoice,#secondChoice');
$select.on('change', function () {
    var str = "Option 1";
    if ($('#firstChoice').val() === str || $('#secondChoice').val() === str) {
        $('.additional').show();
    } else {
        $('.additional').hide();
    }
});

演示------> http://jsfiddle.net/aKqKR/7/

Answer 3

干得好：

$('.additional').hide();
$('#firstChoice,#secondChoice').change(function () {
    $('.additional').css('display', ($('#firstChoice').val() == 'Option 1' || $('#secondChoice').val() == 'Option 1') ? '':'none');
});

jsFiddle 示例