js隱藏功能

Question

加載頁面時（從mysql db動態填充第一個下拉列表（div StatusID））或者用戶從第一個下拉框中選擇Unemployed-EI，div status_sub_6顯示第二個select語句。

我的.hide .show函數可以很好地激活更改，但是即使動態填充的第一個選擇（StatusID）值滿足比較條件，該函數也會隱藏加載頁面時的第二個下拉列表。

我確定我需要一個覆蓋下面的.js代碼的onload函數，但是在編寫附加代碼時真的很感謝幫助。

的JavaScript：

$(document).ready(function(){ 
    $('#status_sub_6').hide(); 

    $('#StatusID').change(function() { 
     if ($('#StatusID option:selected').text() == "Unemployed - EI"){ 
      $('#status_sub_6').show(); 
     } 
     else { 
       $('#status_sub_6').hide(); 
     } 
    }); 
}); 

Answer 1

爲此，您可以通過觸發更改事件負載之後。

$(document).ready(function(){ 
    ... 
    // your current code 
    ... 
    $('#StatusID').trigger('change'); // trigger a change 
}); 

Answer 2

嘗試：

$(function() { 
    $('#status_sub_6').hide(); 
    $(document).on('change', '#StatusID', function() { 
     if ($('#StatusID option:selected').text() == "Unemployed - EI"){ 
     $('#status_sub_6').show(); 
     } 
     else { 
     $('#status_sub_6').hide(); 
     } 
    }); 

    $('#StatusID').change(); 
}); 

Answer 3

你也可以這樣做：

$(document).ready(function(){ 
    if ($('#StatusID option:selected').text() == "Unemployed - EI"){ 
     $('#status_sub_6').hide(); 
    } 

    $('#StatusID').change(function() { 
     if ($('#StatusID option:selected').text() == "Unemployed - EI"){ 
      $('#status_sub_6').show(); 
     } 
     else { 
       $('#status_sub_6').hide(); 
     } 
    }); 
}); 

或略偏優雅的解決方案：

$(document).ready(function() { 
    toggleSub(); 

    $('#StatusID').change(function() { 
     toggleSub(); 
    }); 
}); 

function toggleSub() { 
    if ($('#StatusID option:selected').text() == "Unemployed - EI") { 
     $('#status_sub_6').hide(); 
    } 
    else { 
     $('#status_sub_6').show(); 
    } 
}