Заменить выбранные опции в SumoSelect Librery - PullRequest
Новая
       19

Заменить выбранные опции в SumoSelect Librery

0 голосов
/ 13 октября 2018

Я использую библиотеку SumoSelect для моего selects, используя массивы.Например, у меня есть этот массив, который включает марки автомобилей 

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

Iесть другой тег 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, он заменяет модели автомобилей, которые в модели выбирают и т. Д.

1 Ответ

0 голосов
/ 14 октября 2018

Вам следует применять $(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>
...