Question

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

我的.hide .show函数在更改时激活，但即使第一个选择（StatusID）的动态填充值符合比较条件，该函数也会在加载页面时隐藏第二个下拉列表。

我确信我需要一个onload函数来覆盖以下的.js代码，但是在编写附加代码时会非常感激。

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

js隐藏功能

3 个答案: