Javascript 在页面加载时加载而不是在选择之后加载

Question

我有一个页面，用户可以上传产品照片，他从品牌选择框中选择品牌，该品牌将使用属于该品牌的产品填充产品选择框。

这一切都适用于冷融合，但随着我们添加更多产品，它变得更慢，我已经使用 JSON 格式将产品放在另一个页面上。如果我转到该页面 - prod-json.cfm?brand_id=115，它将正确加载所有信息。问题是我需要它显示在照片页面上，当用户选择特定品牌时，下面是我用来调用产品页面的代码：

<script type="text/javascript">
// JavaScript Document

// The queryToObject function
var queryToObject = function(q) {
var col, i, r, _i, _len, _ref, _ref2, _results;
_results = [];
for (i = 0, _ref = q.ROWCOUNT; 0 <= _ref ? i < _ref : i > _ref; 0 <= _ref ? i++ : i--) {
  r = {};
  _ref2 = q.COLUMNS;
  for (_i = 0, _len = _ref2.length; _i < _len; _i++) {
    col = _ref2[_i];
    r[col.toLowerCase()] = q.DATA[col][i];
  }
  _results.push(r);
}
return _results;
};

// Read the products
$.ajax({
  type: "POST",
url: "prod-json.cfm",
data: {'brand_id': $("##brand_id").val()},
dataType: "json",
success: function(data) {
  var row, sData, _len, _i;
  // Run the data thru queryToObject
  data = queryToObject(data);
  // Convert the object to a string to display it
  sData = JSON.stringify(data);

  // Print all products
  $('##product_id').append('');
  // Loop over the query
  for (_i = 0, _len = data.length; _i < _len; _i++) {
    row = data[_i];
    $('.multiple').append('<option value=' + row.product_id + ' class="' + row.brand_id + '">' +   row.product_title + ' - ' + row.make_title + ' ' + row.model_title + '');
 }
 }
 });
 </script>

如果我用选定的特定品牌刷新页面，那么它将显示产品，但如果我选择另一个品牌，则它不会加载任何内容，请有人帮我解决这个问题。

提前致谢。

Answer 1

我认为正在发生的事情是您没有任何东西在监听要更改的下拉菜单。

您可以通过多种方式解决此问题。最简单的方法是将整个 AJAX 调用包装在另一个函数中......类似于：

function loadData() {
     $.ajax({
  type: "POST", .......
}

然后将代码的顶部更改为：

$(function(){

    $('.styled').customSelect();

    $('#brand_id').change(function() {
        loadData();
    });
    loadData(); // this triggers the initial load for the default value.  might not be necessary
});