javascript - 当 2 个选择具有特定值时显示 div

Question

我有两个下拉菜单:

<select name="name_1" id="name_1">
    <option value="Y" selected="selected">Option 1</option>
    <option value="N">Option 2</option>
</select>

<select name="name_2" id="name_2">
    <option value="Y" selected="selected">Option 1</option>
    <option value="N">Option 2</option>
</select>

如果我在第一个选择“Y”选项，在第二个选择“N”选项，我想显示一条警告消息。所以这是我的脚本:

var name_1;
var name_2;

$('#name_1').on('change'), function () {
    name_1 = this.val();
}
$('#name_2').on('change'), function () {
        name_2 = this.val();
}

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

if (name_1 == 'Y' && name_2 == 'N') {
    $('#notification').show();
} else {
    $('#notification').hide();
}

知道我做错了什么吗？通知根本不显示。

Answer 1

您可以为通知显示创建一个单独的函数，然后在两个 select 的 change 上调用它:

$('#name_1, #name_2').on('change', display_notification);

使用单独函数的代码段:

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

$('#name_1, #name_2').on('change', display_notification);

function display_notification(){
  if ($('#name_1').val() == 'Y' && $('#name_2').val() == 'N') {
    $('#notification').show();
  } else {
    $('#notification').hide();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="name_1" id="name_1">
  <option value="Y" selected="selected">Option Y </option>
  <option value="N">Option N</option>
</select>

<select name="name_2" id="name_2">
  <option value="Y" selected="selected">Option Y</option>
  <option value="N">Option N</option>
</select>

<br/><br/>
<div id='notification'>NOTIFICATION</div>

或者您可以直接将流程添加到更改事件中，而无需使用额外的功能:

直接使用更改事件的片段:

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

$('#name_1, #name_2').on('change', function(){
  if ($('#name_1').val() == 'Y' && $('#name_2').val() == 'N') {
    $('#notification').show();
  } else {
    $('#notification').hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="name_1" id="name_1">
  <option value="Y" selected="selected">Option Y </option>
  <option value="N">Option N</option>
</select>

<select name="name_2" id="name_2">
  <option value="Y" selected="selected">Option Y</option>
  <option value="N">Option N</option>
</select>

<br/><br/>
<div id='notification'>NOTIFICATION</div>