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>

如果将select设置为选项1，则div应显示，否则应隐藏它。

Fiddle

[编辑]为了简短起见，我尝试过的非常糟糕，我没有发布我所做的事情。为此道歉。我已经使用以下答案之一的修改版本更新了上述小提琴。感谢。

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");
    }
}

Fiddle

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 example

根据两个选择输入显示div

3 个答案: