Question

我有一组选择（birth_year，birth_month和birth_day）。我写了这个代码，用一个月的正确天数填充下拉列表，如果没有选择年份，则禁用月份，日期下拉等。我的问题是我有另一组下拉列表（entry_year，entry_month ，entry_day）在我希望使用此功能的表单上，我不知道我该怎么做。

如何修改此功能以使用另一组选择框？

$(document).ready(function() {
  $('.sl_birth_year').change(function() {
    var birth_year = $('#sl_birth_year').val();
    if (birth_year != 0)
  $('#sl_birth_month').attr('disabled', false);
    else {
  $('#sl_birth_month').attr('disabled', true);
  $('#sl_birth_day').attr('disabled', true);
}
$('#sl_birth_month').val(0);
$('#sl_birth_day').val(0);
  }),
  $('#sl_birth_month').change(function() {
    var birth_year = $('#sl_birth_year').val();
    var birth_month = $('#sl_birth_month').val();
    if (birth_month != 0) {
  $('#sl_birth_day').attr('disabled', false);
  var post_url = "/index.php/admin/get_days/" + birth_year + "/" + birth_month;
  $.ajax ({
    type: "POST",
    url: post_url,
    success: function(num_of_days) {
      $('#sl_birth_day').empty();
      $('#sl_birth_day').append('<option value="0"> </option>');
      for (var i = 0; i < num_of_days; i++) {
        var string = '<option value="' + (i + 1) + '">' + (i + 1) + "</option>";
    $('#sl_birth_day').append('<option value="' + (i + 1) + '">' + (i + 1) + "</option>");
      }
    }
  });
}
    else {
  $('#sl_birth_day').val(0);
  $('#sl_birth_day').attr('disabled', true);
}
  });
});

Answer 1

你可以对元素上的id进行变换，并将它们传递给函数。如果我是，我会将这些代码分解为一系列较小的函数。找到常用功能并将其放入函数中，然后重复使用它，例如你可以创建一个小函数，你可以传入一个数组元素来禁用它们。

Answer 2

您需要在javascript中声明一个新函数，该函数接受您可以为您拥有的不同下拉组传入的参数。它可以简化和/或提高效率，但这适用于您的特定代码：

$(document).ready(function() { 
    SomeFunction('.sl_birth_year', '#sl_birth_month', '#sl_birth_day');
});

function SomeFunction(strYearClass, strYearID, strMonth, strDay) {
    $(strYearClass).change(function() { 
    var birth_year = $(strYearID).val(); 
    if (birth_year != 0) 
  $(strMonth).attr('disabled', false); 
    else { 
  $(strMonth).attr('disabled', true); 
  $(strDay).attr('disabled', true); 
} 
$(strMonth).val(0); 
$(strDay).val(0); 
  }), 
  $(strMonth).change(function() { 
    var birth_year = $(strYear).val(); 
    var birth_month = $(strMonth).val(); 
    if (birth_month != 0) { 
  $(strDay).attr('disabled', false); 
  var post_url = "/index.php/admin/get_days/" + birth_year + "/" + birth_month; 
  $.ajax ({ 
    type: "POST", 
    url: post_url, 
    success: function(num_of_days) { 
      $(strDay).empty(); 
      $(strDay).append('<option value="0"> </option>'); 
      for (var i = 0; i < num_of_days; i++) { 
        var string = '<option value="' + (i + 1) + '">' + (i + 1) + "</option>"; 
    $(strDay).append('<option value="' + (i + 1) + '">' + (i + 1) + "</option>"); 
      } 
    } 
  }); 
} 
    else { 
  $(strDay).val(0); 
  $(strDay).attr('disabled', true); 
} 
  }); 

}

Answer 3

使用元素的类名，将对包装元素的引用传递给函数，并确定父包装器的元素 relative 。

这样的事情：

function setDrops(parent) {
 $('.sl_birth_year').change(function() {
   var yearTarget = $(parent).find('.sl_birth_yearVAL')
   var birth_year = $(yearTarget).val();

.....
}

Answer 4

您可以使用类似“date_container”的类将每组选择框包装在自己的div中，为每个选择类型指定其自己的类名（例如“year”，“month”和“day”），然后更改您的函数所以它收到你的一个包装div并相对于它工作。

我不会为你写它但它看起来像：

你的HTML：

<div id="this_one_date_container" class="date_container">
  <select class="year" ...>...</select>
  <select class="month" ...>...</select>
  <select class="day" ...>...</select>
</div>
...
<div id="this_other_date_container" class="date_container">
  <select class="year" ...>...</select>
  <select class="month" ...>...</select>
  <select class="day" ...>...</select>
</div>

你的javascript：

function doWhateverWithSelectDateDiv(selectDateDiv) {
  var year = selectDateDiv.find('.year'),
      month = selectDateDiv.find('.month'),
      day = selectDateDiv.find('.day');
  ...
}

Answer 5

$(document).ready(function() {
    var changeBirthYear = function($obj) {
        var birthMonth = $('.birth_month', $obj);
        var birthDay = $('.birth_day', $obj);
        var birth_year = $($obj).val();
        if (birth_year != 0)
        birthMonth.attr('disabled', false);
        else {
            birthMonth.attr('disabled', true);
            birthDay.attr('disabled', true);
    }

    var changeBirthMonth = function($obj) {
        var birthMonth = $('.birth_month', $obj).val();
        var birthDay = $('.birth_day', $obj);
        var birth_year = $($obj).val();
        if (birthMonth != 0) {
            birthDay.attr('disabled', false);
            var post_url = "/index.php/admin/get_days/" + birth_year + "/" + birth_month;
            $.ajax ({
                type: "POST",
                url: post_url,
                success: function(num_of_days) {
                    birthDay.empty();
                    birthDay.append('<option value="0"> </option>');
                    for (var i = 0; i < num_of_days; i++) {
                        var string = '<option value="' + (i + 1) + '">' + (i + 1) + "</option>";
                        birthDay.append('<option value="' + (i + 1) + '">' + (i + 1) + "</option>");
                    }
                }
            });
        }
        else {
            birthDay.val(0);
            birthDay.attr('disabled', true);
        }
    }

    changeBirthYear($('.birth_year_1'));    
    changeBirthYear($('.birth_year_2'));    
    changeBirthMonth($('.birth_year_1'));   
    changeBirthMonth($('.birth_year_2'));   

    //somthing like that

});

在JQuery中的不同元素上使用相同的函数

5 个答案: