Question

我有4个模型，其值取决于每个下一个模型。我们来看4个型号：（1）设备类型（2）设备品牌（3）设备模型（4）设备

这里（2）取决于（1）的值，（3）取决于（2）的值，（4）取决于（3）的值。

当我从droplist（1）中选择值时，它将使用make ajax调用更新（2）的droplist值，当从droplist（2）中选择值时，它将相应地使用ajax调用更新（3）的值等等。

这条链可能很多。

对于新表格，它会很好。没问题。

但是当我们要进行更新时，我们如何以更好的方式管理所有这些内容。

我试过

在页面加载集上我有4个模型，其值取决于每个下一个模型。我们来看4个型号：（1）设备类型（2）设备品牌（3）设备模型（4）设备

这里（2）取决于（1）的值，（3）取决于（2）的值，（4）取决于（3）的值。

当我从droplist（1）中选择值时，它将使用make ajax调用更新（2）的droplist值，当从droplist（2）中选择值时，它将相应地使用ajax调用更新（3）的值等等。

这条链可能很多。

对于新表格，它会很好。没问题。

但是当我们要进行更新时，我们如何以更好的方式管理所有这些内容。

我试过

页面加载

1）从DB设置设备类型值。

// On page load
$(".equipment_type_cmb_box").each(function(){
  $(this).trigger('change');
})

$(function(){

  $(document).on('change', ".equipment_type_cmb_box", function(){
    $.ajax({
        url: '/get_equipment_brand_collection',
        dataType: 'json',
        data: {equipment_type_id: $(this).val()},
    })
    .done(function(data) {
     // set equipment brand values in equipment brand droplist
     $(".equipment_brand_cmb_box").html('').select2({
         data: data.equipment_brands.map(function(obj){
           return {id: obj.id, text: obj.name} 
         })
     })
// change the value in droplist and fire change event to get next associated droplist data
  $(".equipment_brand_cmb_box").val(db_saved_value).trigger('change')
    })
    .fail(function(errorObject) {
        console.log("Error : ", errorObject.statusText);
     })
  })

  $(document).on('change', ".equipment_brand_cmb_box", function(){
      $.ajax({
        url: '/get_equipment_model_collection',
        dataType: 'json',
        data: {equipment_brand_id: $(this).val()},
      })
      .done(function(data) {
        // set equipment model values in equipment model droplist
        $(".equipment_model_cmb_box").html('').select2({
          data: data.equipment_models.map(function(obj){
                  return {id: obj.id, text: obj.name} 
                })
        })
       // change the value in droplist and fire change event to get next associated droplist data
  $(".equipment_model_cmb_box").val(db_saved_value).trigger('change')
      })
      .fail(function(errorObject) {
        console.log("Error : ", errorObject.statusText);
      })
    })

    $(document).on('change', ".equipment_model_cmb_box", function(){
      $.ajax({
        url: '/get_equipment_collection',
        dataType: 'json',
        data: {equipment_model_id: $(this).val()},
      })
      .done(function(data) {
        // set equipment values in equipment droplist
        $(".equipment_cmb_box").html('').select2({
          data: data.equipment.map(function(obj){
                  return {id: obj.id, text: obj.name} 
                })
        })
// change the value in droplist and fire change event to get next associated droplist data
       $(".equipment_cmb_box").val(db_saved_value).trigger('change')
      })
      .fail(function(errorObject) {
        console.log("Error : ", errorObject.statusText);
      })
    })
})

一个cahin fire 3 ajax致电获取设备品牌，设备型号，设备数据。所以，如果我有5个链，那么它将触发15个ajax调用，这不是更好的方法。

任何人都可以提出更好的建议吗？如果任何人有适当的解决方案，那将是很好的。

Answer 1

我不确定这是否会对您有所帮助，但您可以尝试缓存提供选项的功能。这将减少api呼叫。

JSFiddle

function getOptions(endpoint, data) {
  var hash = endpoint + JSON.stringify(data);
  if (typeof getOptions.cache[hash] !== "undefined") {
    console.log('Got data from cache');
    return Promise.resolve(getOptions.cache[hash]);
  }

  return $.ajax({
    url: endpoint,
    dataType: 'json',
    data: data
  }).then(function(resp) {
    console.log('Got data from api');
    getOptions.cache[hash] = resp;
    return resp;
  })
}

如何在编辑时管理多个相关的下拉列表？

1 个答案: