jQuery цепочка / фильтрованный выпадающий список не работает для всех выборов

Question

Имейте в виду, я не хочу использовать Chained. JS или любые Django плагины, у меня не было ничего, кроме проблем с ними, и я пытался это делать в течение длительного времени. Я действительно хотел попробовать это сам, используя jQuery, так как чувствую, что это не должно быть слишком сложно, и предыдущие плагины, которые у меня были (django умный выбор, цепочка. js), не играли хорошо с другими функциями на мой сайт (и, в частности, страница, на которой он находится).

Вот так:

$(document).ready(function(){
    $("#id_carmake").change(function(){
    $("#id_carmodel option").hide();
    var carbrand = $("#id_carmake option:selected").text();
    $("#id_carmodel option:contains('"+ carbrand +"')").show().filter(function(i){
        return $(this).text() === carbrand;}).prop("selected", true);
    });
});

Это код, который я использую для второго раскрывающегося списка на основе первого выбора. (марка автомобиля, модель автомобиля). Я считаю, что это само за себя. Это на самом деле работает! 90% времени Большинство «марок» заполняет второй выпадающий список своими «моделями».

Второй выпадающий список включает название марки («Ford F150», «Toyota Prius» и т. Д. c), поэтому я смог выполнить фильтрацию по включенному тексту. Мне интересно, если что-то не так с моим кодом, я не эксперт по JavaScript или jQuery, но хочу знать, что я делаю не так, чтобы я мог улучшить и преодолеть эту проблему - любая помощь будет принята.

Я использую jQuery 3.4.1.

Вот сокращенная версия выпадающего списка HTML, если это помогает:

<select name="carmake" class="select form-control" required="" id="id_carmake"> 
  <option value="" selected="">---------</option> 
  <option value="1">Acura</option> <option value="2">Alfa Romeo</option> 
  <option value="3">AMC</option> 
  <option value="4">Aston Martin</option> 
</select>

<select name="carmodel" class="select form-control" required="" id="id_carmodel"> 
  <option value="" selected="" style="">---------</option> 
  <option value="1" style="display: none;">Acura 2.2CL</option> 
  <option value="2" style="display: none;">Acura 2.3CL</option> 
  <option value="3" style="display: none;">Acura 3.0CL</option> 
</select>

Answer 1

Поскольку у вас есть несколько вариантов на одном автомобиле, вы можете выбрать только первый вариант по умолчанию, используя eq(0):

$(document).ready(function(){
  $("#id_carmake").change(function(){
    $("#id_carmodel option").hide();
    var carbrand = $("#id_carmake option:selected").text();
    $("#id_carmodel option:contains('"+ carbrand +"')").show();
    $("#id_carmodel option:contains('"+ carbrand +"')").eq(0).attr('selected',true);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="carmake" class="select form-control" required="" id="id_carmake"> 
  <option value="" selected="">---------</option> 
  <option value="1">Acura</option> <option value="2">Alfa Romeo</option> 
  <option value="3">AMC</option> 
  <option value="4">Aston Martin</option> 
</select>

<select name="carmodel" class="select form-control" required="" id="id_carmodel"> 
  <option value="" selected="" style="">---------</option> 
  <option value="1" style="display: none;">Acura 2.2CL</option> 
  <option value="2" style="display: none;">Acura 2.3CL</option> 
  <option value="3" style="display: none;">Acura 3.0CL</option> 
  <option value="4" style="display: none;">Aston Martin 2.2CL</option> 
  <option value="5" style="display: none;">Aston Martin 2.3CL</option> 
  <option value="6" style="display: none;">Aston Martin 3.0CL</option> 
</select>

Хотя я бы предпочел использовать данные - *. Кроме того, использование встроенного css не является хорошей практикой:

$(document).ready(function(){
  $("#id_carmake").change(function(){
    $("#id_carmodel option").hide();
    var carbrand = $("#id_carmake option:selected").data('car');
    var matched = $(`#id_carmodel [data-car=${carbrand}]`);
    matched.show();
    matched.eq(0).attr('selected', true);
  });
});

#id_carmodel option{
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="carmake" class="select form-control" required="" id="id_carmake"> 
  <option value="" selected="">---------</option> 
  <option value="1" data-car="acura">Acura</option> 
  <option value="2" data-car="alfaRomeo">Alfa Romeo</option> 
  <option value="3" data-car="AMC">AMC</option> 
  <option value="4" data-car="astonMartin">Aston Martin</option> 
</select>

<select name="carmodel" class="select form-control" required="" id="id_carmodel"> 
  <option value="" selected="" style="">---------</option> 
  <option value="1" data-car="acura">Acura 2.2CL</option> 
  <option value="2" data-car="acura">Acura 2.3CL</option> 
  <option value="3" data-car="acura">Acura 3.0CL</option> 
  <option value="4" data-car="astonMartin">Aston Martin 2.2CL</option> 
  <option value="5" data-car="astonMartin">Aston Martin 2.3CL</option> 
  <option value="6" data-car="astonMartin">Aston Martin 3.0CL</option> 
</select>