使用jQuery change方法从Javascript对象和html select元素更新内容

Update content with jQuery change method from Javascript object and html select element

本文关键字：select html 元素 更新 新内容 对象 change jQuery 方法 Javascript 使用      更新时间：2023-09-26

如何根据选择的更改值使div#页面的内容动态更改。

(function() {
    var i, j, k, maxI, maxJ, maxK, year, quarter, page;
    for (i = 0, maxI = myObj.length; i < maxI; i++) {
        year = myObj[i];
        $('#years').append('<option>' +  year.year +'</option>');
         $('#years').change(function(){
             $('#quarters').html('');
            for (j = 0, maxJ = year.quarters.length; j < maxJ; j++) {
                quarter = year.quarters[j];
                $('#quarters').append('<option>' +  quarter.quarter +'</option>');
                $('#quarters').change(function(){
                    $('#pages').html('');
                    for (k = 0, maxK = quarter.pages.length; k < maxK; k++) {
                    page = quarter.pages[k];
                    $('#pages').append("<div class='page'><a href=' " + page.url + "'>" + page.name + '</a></div>');
                }
                });
            } 
        });

    }
}());

http://jsfiddle.net/alexandra_steuerhaus/s69rC/2/

首先需要获取并显示循环中的年份，然后分别为selects编写.change()函数。

for (var i = 0, maxI = myObj.length; i < maxI; i++) {
  $('#years').append('<option>' +  myObj[i].year +'</option>');
}
$('#years').change(function(){
  $('#quarters').empty();
  $('#pages').empty();
  var quarters = myObj[$(this).find("option:selected").index()].quarters;
  quarters.forEach(function(q) {
    $('#quarters').append('<option>' + q.quarter +'</option>');
  });
  $('#quarters').change();
});
$('#quarters').on("change", function(){
  $('#pages').empty();
  var quarters = myObj[$('#years').find("option:selected").index()].quarters;
  var pages = quarters[$(this).find("option:selected").index()].pages;
  pages.forEach(function(p) {
      $('#pages').append("<div class='page'><a href='" + p.url + "'>" + p.name + '</a></div>');
  });
});

更新的FIDDLE

您需要使用（$（document）.ready（function）{所有javascript内容})（））；

这是在页面上呈现选择列表之前，尝试执行填充选择列表的函数。如果在脚本的第一个地方放一个断点，您可以看到$（'#years'）没有选择任何

相关文章：