當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

您可以為通知顯示創建一個單獨的函數，然后在change兩個select調用它：

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

Answer 2

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

CodePen中的演示

Answer 3

是的，您正在檢查兩個選擇是否只有一次好的值（首次運行腳本時）。

這樣做：

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

如果你看一下jQuery.on的文檔，你會發現調用它的正確方法是這樣的：

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

您可以看到該function必須位於 .on的括號內。

Answer 6

您的代碼幾乎沒有問題。

1：更改時的語法不正確

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

它應該是

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

2：您正在檢查頁面加載的值並為change事件分配值。

3：內部更改事件監聽器this.val應為$（this）.val（）;

嘗試更改您的代碼，如下所示。

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

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

Answer 7

我會這樣做（請注意，將布爾值傳遞給.toggle()將確定狀態）：

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

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