替换 SumoSelect 库中的选择选项

Posted 2023-05-08

【中文标题】替换 SumoSelect 库中的选择选项

【英文标题】：Replace select options in SumoSelect Librery

【发布时间】：2019-03-18 13:05:03

【问题描述】：

我正在使用数组为我的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，我需要将模型数组添加到选择模型中，例如我在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 中的模型车等等。

【问题讨论】：

下次，请尝试提供工作代码以及依赖项，以便更好地帮助您。 ***.com/help/mcve

【参考方案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>