Replace select options in SumoSelect Librery

Question

I am implementing SumoSelect library to my selects using arrays. For example, I have this array that includes vehicle brands

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

I am using this array to fill out my select, for example:

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

Then I fill it out with this once the page is loaded:

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

Because I got some other arrays that include the vehicle models, what I'd like to do is the following:

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"}
    ]

I have another html tag:

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

Once I make a selection on the brands selects, I need to add a model arrays into select model, for example I tried this on the change event:

$('#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 

});
 }
})

Hopefully, you understand the idea. This works but it adds options and saves the one added before. What I need is when the user clicks on Toyota it replaces the model cars that are in model select and so on.

Answer 1

You should apply $(obj)[0].sumo.reload(); each time you change the options . Also I've optimized your code .

Check :

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>