javascript - js隐藏功能

Question

当页面加载（第一个下拉列表（div StatusID）是从 mysql db 动态填充）或用户从第一个下拉框中选择 Unused - EI 时，div status_sub_6 显示第二个选择语句。

我的 .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

你也可以这样做：

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

Answer 3

尝试：

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