替换 SumoSelect 库中的 select 个选项

Question

我正在使用数组为我的 selects 实现 SumoSelect 库。例如，我有这个包含汽车品牌的数组

var vehicleBrands=[
      {brand:"Honda"},
      {brand:"toyota"},
      {brand:"hyundai"}
    ]

我正在使用这个数组来填写我的select，例如：

<select class="brands">
   <option>brands here</option>
</select>

然后我在页面加载后填写它：

$(document).ready(function(){
    vehicleBrands.forEach(function(brands, index) {
      $(".brands").append("<option value='"+index+"'>"+ brands.brand+ "</option>" )
    });
})

因为我得到了一些包含车辆模型的其他数组，所以我想做的是：

var toyotaModels=[
      {model:"corolla"},
      {model:"4Runner"},
      {model:"camry"}
    ]

   var hondaModels=[
      {model:"accord"},
      {model:"civic"},
      {model:"Pilot"}
    ]

  var hyundaiModels=[
      {model:"sorento"},
      {model:"sonata"},
      {model:"santa fe"}
    ]

我还有一个 html 标签:

<select class="models"><option>models here</option></select>

一旦我在品牌 selects 上制作了 selection，我需要将模型数组添加到 select 模型中，例如我在 change 事件：

$('#vehicle-brand').change(function(){

    var myOption=$(this).val();
 if(myOption=="Honda"){

     hondaModel.forEach(function(model, index) {

    $('.model')[0].sumo.unload();
    $('.model').SumoSelect();
    $('.model')[0].sumo.add(model.text);//this add options 

});
 }
})

希望您理解这个想法。这有效，但它添加了选项并保存了之前添加的选项。我需要的是，当用户点击 Toyota 时，它会替换 model select 等中的模型车。

Answer 1

每次更改选项时都应应用 $(obj)[0].sumo.reload();。我也优化了你的代码。

检查：

var vehicleBrands=[
  {
    brand:"Honda",
    models:[
      {model:"accord"},
      {model:"civic"},
      {model:"Pilot"}
    ]
  },
  {
    brand:"Toyota",
    models:[
      {model:"corolla"},
      {model:"4Runner"},
      {model:"camry"}
    ]
  },
  {
    brand:"Hyundai",
    models:[
      {model:"sorento"},
      {model:"sonata"},
      {model:"santa fe"}
    ]
  }
]

$(document).ready(function(){
  $('.brands').SumoSelect();
  $('.models').SumoSelect();
  
  vehicleBrands.forEach(function(brands, index) {
    $(".brands").append("<option value='"+index+"'>"+ brands.brand+ "</option>" )
  });
  $('.brands')[0].sumo.reload();
  
  $('.brands').change(function(){
   $(".models").html('');
    var myOption=$(this).val();
    vehicleBrands[myOption].models.forEach(function(model, index) {
      $(".models").append("<option value='"+model.model+"'>"+ model.model+ "</option>" )
    });
   $('.models')[0].sumo.reload();
  })
})

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/jquery.sumoselect.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/sumoselect.min.css" rel="stylesheet" />

<select class="brands"></select>
<select class="models"></select>

替换 SumoSelect 库中的 select 个选项

Replace select options in SumoSelect Librery

jquery

sumoselect.js