Как соединить 2 select?

Question

[Саша Улыч]

Всем привет, опишу ситуацию. Есть 2 селекта: марка и модель автомобиля. В зависимости от выбранной марки, во второй селект грузиться нужный список моделей автомобиля.
Удалось реализовать для 1 марки:

$(document).on( 'click', '#mark', function() {
    var markValue = $( "#mark option:selected" ).val();
    selectModel = { "1": "A4", "2": "A6", "3": "A8" };
    selectModel2 = { "1": "Mercedes-Benz A-klasse (176)", "2": "Mercedes-Benz C-klasse (W205)", "3": "E-klasse (W212)" };
//    var array = {selectModel1, selectModel2};
    $('#model').empty();
    $.each(selectModel, function(key, value) {   
     $('#model')
         .append($("<option></option>")
         .attr("value",key)
         .text(value)); 
});
    });

Ссылка на fiddle
Каким образом сделать для нескольких марок автомобилей? (особенно когда их будет много)

Comments

[Роман Ахмадуллин]

Код ведь вроде как совсем неправильный у вас. Он же не работает как надо, у меня по крайней мере)

[Саша Улыч]

Роман Ахмадуллин: Он грузит одно и тоже значение моделей, к любой марке. Как по другому сделать не соображу(

Answer 1

[timokins]

Если не захотите встраивать еще одно библиотеку по примеру выше.
То стоит вместо обработчика click поставить на первый select обработчик change, который будет отслеживать изменения. И в теле обработчика получаете value выставленного option и по нему обрабатываете нужный json во второй select.

Comments

[timokins]

Вот отредактировал Ваш вариант, он не идеален, конечно.
Но смысл, думаю, будет понятен.
jsfiddle.net/f3hg7txu/1

Answer 2

[Роман Ахмадуллин]

Я бы сделал вот так, если честно :) На основе Riot.js. На нём подобные вещи становятся очень простыми. Порог понимания JS там более высокий, чем писать обычные портянки на jQuery, но оно того стоит.

Answer 3

[SSSasha]

Вот решение только вместо марки и модели автомобиля - страна и город в ней, обьединены data-id

$('.header-select[name="country"]').on('change', function () {
      let countryOptionSelected = $(
        '.header-select[name="country"] > option:selected'
      );
      let cityOption = $('.header-select[name="city"] > option');

      cityOption.each(function () {
        if ($(this).data('id') == countryOptionSelected.data('id')) {
          $(this).addClass('show');
        } else {
          $(this).removeClass('show');
        }
      });

      $('.header-select[name="city"] option').prop('selected', false);
      $('.header-select[name="city"] .show:first').prop('selected', true);

      if (countryOptionSelected.hasClass('default')) {
        cityOption.each(function () {
          if ($(this).hasClass('show') == false) {
            $(this).addClass('show');
          }
        });
      }
    });

<select class="header-select" name="country">
       <option class="default" value="">Country</option>
       <option data-id="16" value="austria">Austria</option>
       <option data-id="8" value="germany">Germany</option>
        <option data-id="23" value="switzerland">Switzerland</option>
</select>
<select class="header-select" name="city">
        <option class="show" value="">All cities</option>
         <option class="show" data-id="16" value="wien">Wien</option>
          <option class="show" data-id="8" value="berlin">Berlin</option>
          <option class="show" data-id="8" value="dresden">Dresden</option>
           <option class="show" data-id="8" value="hamburg">Hamburg</option>
           <option class="show" data-id="23" value="bremgarten">Bremgarten</option>
</select>

<style>
select[name='city'] {
    option {
      display: none;

      &.show {
        display: block;
      }
    }
  }
</style>