当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>

如果我在第一个选择＆＃39; Y＆＃39;选项和第二个“N＆＃39;选项我想显示一条警告信息。所以这是我的剧本：

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

您可以为通知显示创建单独的功能，然后在change的{​​{1}} select上调用它：

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

使用单独功能的代码段

＆＃13;

＆＃13;

$('#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();
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

直接使用更改事件的代码段：

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

{{3}}

Answer 3

是的，您正在检查两个select是否只有一次有效值（首次运行脚本时）。

这样做：

var name_1;
var name_2;

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

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

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

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

任何一次选择更改时，都会检查是否应显示或隐藏div。

Answer 4

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

Answer 5

这是因为在首次加载页面时，应显示通知的代码只运行一次。

为了确保每次用户更改其中一个下拉列表时都运行代码，您可以创建一个单独的函数来执行以下检查：

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

function checkValues() {
  if ($('#name_1').val() == 'Y' && $('#name_2').val() == 'N') {
    alert("You have been warned!");
  }
}

<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 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>

您的原始代码存在其他问题，主要是此部分：

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

如果您查看documentation for jQuery.on，您会发现调用它的正确方法是这样的：

$( "#dataTable tbody tr" ).on( "click", function() {
  console.log( $( this ).text() );
});

您可以看到function必须在的.on括号内

。

Answer 6

您的代码存在一些问题。

1：on change的语法不正确

 $('#name_1').on('change'), function () {}

应该是

$('#name_1').on('change', function () { });

2：您正在检查页面加载的值并为更改事件分配值。

3：内部更改事件侦听器this.val应为$（this）.val（）;

尝试更改您的代码，如下所示。

＆＃13;

＆＃13;

var name_1 = $('#name_1').val();
var name_2 = $('#name_2').val();

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

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

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


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

＆＃13;

<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 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>

<div id="notification">
  Me
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 7

我会这样做（请注意，将布尔值传递给.toggle()将决定状态）：

＆＃13;

＆＃13;

$('#name_1,#name_2').on('change', function(){
  $('#notification').toggle($('#name_1').val() + $('#name_2').val() === 'YN')
}).trigger('change');

＆＃13;

<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 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>

<div id="notification">Warning Message</div>

＆＃13;

＆＃13;

＆＃13;