Select выбор option, открыть нужный select?

Question

[Денис]

Есть основной select с перечнем марок автомобилей и при выборе одной из марок авто, появляется под каждую марку разный select с возможностью выбора модели авто, как реализовать на jquery?

Вот так сделал но кажется как то не профессионально, а если будет их 1000

https://codepen.io/furmoz/pen/MWmzRVX

Пробовал:

$('.select').on('change', function (){
  var marka = $(this).val();
If($('select').hasClass(marka) == true){
$('all-select').hide;
$(this).show();
});

Answer 1

[Aricus]

Есть два варианта. Первый - подгрузка по ajax по значениям из базы данных.
Второй - создать все дочерние списки сразу. Тогда нужно в каждый дочерний список добавить data-атрибут со значением, равным value в option. При изменении родительского списка скрыть все дочерние и показать нужный.
Спросите, если что-то непонятно.

Comments

[Денис]

я вот так сделал

[Денис]

https://codepen.io/furmoz/pen/MWmzRVX

[Денис]

но мне кажется это как то не профессионально, а если их будет 1000 ??? как то же можно сократить код?

[Aricus]

Денис, Верно подмечено. Тут всё просто. Нужно найти или создать что-то общее для пункта родительского списка и дочернего списка: id, html, класс, value или data-атрибут. У вас оно уже есть, просто вы почему-то не видите:

Тут только js менял.

[writer_2159]

для размышления

Осторожно говнокод

Source:
  <select id="brand" name="brand">
     <option value="audi">audi</option>
     <option value="bmw">bmw</option>
</select>

<br><br>

<span class='nameCar'></span>:

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

const json = {"audi":['car1','car2'],'bmw':['car3','car4']}
$(document).ready(function() {
  var firstKey = null;
  for(var key in json){
      firstKey = key;
      break;
  }
  
  if(firstKey!==null){
      selectCar(firstKey)
  }
  
  $("#brand").change(function() {
    
    var el = $(this) ;
    var title = el.val();
    selectCar(title)
  });
  
  function selectCar(title){
    var models = json[title]
    
    $('.nameCar').text(title)
    
    $('.select-models').html('')
    
    for(const model of models){
      $('.select-models').append('<option>'+model+'</option>')
    }
  }
  
});

[Денис]

Aricus, респект, я пробовал что то подобное, не получалось. я там что то намудрил

[Aricus]

Денис, Тогда отметьте мой ответ решением.

[Денис]

я смотрю вы в Wordpress хорошо разбираетесь, можете подсказать, как можно вывод статей реализовать вот таким способом ?

g1t.ru/video/chrome_GVRMeukwT8.png

[Aricus]

Денис, Не открывается. Да и в wordpress я разбираюсь довольно средне.