Question

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

这一切都与coldfusion一起使用，但随着我们添加更多产品它变得更慢，我已经使用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
});

在进行选择后，Javascript不会在页面加载时加载

1 个答案: