Управлять вторыми <select>на основе первых <select>значений с помощью jQuery

Question

Это был фирменный дубликат Заполните один выпадающий список на основе выбора в другом , но мне нужно решение jQuery, которое работает в кросс-браузерном режиме. Многое из того, что я нашел, это либо ванильный JS, либо PHP. Просто нужен чистый HTML и jQuery. (Мой оригинальный вопрос: Как заполнить второе

У меня есть два <select> раскрывающихся списка, второй из которых необходимо заполнитьпо значению, выбранному в первом. Как мне это сделать?

<label for="allmakes" style="display: none;">All Makes</label>
<select class="search-form__select" id="allmakes" name="allmakes">

    <option selected disabled>All Makes</option>

    <option value="audi">Audi</option>
    <option value="bmw">BMW</option>
    <option value="nissan">Nissan</option>
    <option value="vauxhall">Vauxhall</option>

</select>

<label for="allmodels" style="display: none;">All Models</label>
<select class="search-form__select" id="allmodels" name="allmodels">

    <option selected disabled class="all-models">All Models</option>

    <option value="audi" class="audi" disabled>A1</option>
    <option value="audi" class="audi" disabled>A2</option>
    ...

    <option value="bmw" class="bmw" disabled>1 Series</option>
    <option value="bmw" class="bmw" disabled>2 Series</option>
    ...

    <option value="nissan" class="nissan" disabled>GT-R</option>
    <option value="nissan" class="nissan" disabled>Juke</option>
    ...

    <option value="vauxhall" class="vauxhall" disabled>Astra</option>
    <option value="vauxhall" class="vauxhall" disabled>Corsa</option>
    ...

</select>

@ King11 предоставил кое-что полезное для ответа на мой другой вопрос, но вызывал некоторые проблемы в Safari (мне пришлось добавить отключено по умолчанию и отключить их)и на Edge (и я полагаю, IE), всплывающее меню выбора отображает большое количество пустого пространства, где находятся отключенные опции, и я не могу добавить какую-то автоматическую высоту к этому.

var audi      = $('.audi'),
    bmw       = $('.bmw'),
    nissan    = $('.nissan'),
    vauxhall  = $('.vauxhall');

$('#all-makes').change(function() {
    $('.all-models').prop('selected', true);

    // .show() and .hide() working on Chrome, Firefox and Opera.
    // Added attr() and removeAttr() to work on Safari but the disabled options are still visible. Would ideally like to hide these.
    if ($(this).val() === 'audi') {
        audi.show().removeAttr('disabled');
        bmw.hide().attr('disabled', 'disabled');
        nissan.hide().attr('disabled', 'disabled');
        vauxhall.hide().attr('disabled', 'disabled');
    } else if ($(this).val() === 'bmw') {
        audi.hide().attr('disabled', 'disabled');
        bmw.show().removeAttr('disabled');
        nissan.hide().attr('disabled', 'disabled');
        vauxhall.hide().attr('disabled', 'disabled');
    } else if ($(this).val() === 'nissan') {
        audi.hide().attr('disabled', 'disabled');
        bmw.hide().attr('disabled', 'disabled');
        nissan.show().removeAttr('disabled');
        vauxhall.hide().attr('disabled', 'disabled');
    } else if ($(this).val() === 'vauxhall') {
        audi.hide().attr('disabled', 'disabled');
        bmw.hide().attr('disabled', 'disabled');
        nissan.hide().attr('disabled', 'disabled');
        vauxhall.show().removeAttr('disabled');
    }
});

Answer 1

Я бы использовал jQuery для динамического добавления и удаления опций из второго набора опций.

Я нашел эту статью:

https://paulund.co.uk/add-and-remove-options-in-select-using-jquery

 In the gist is this:

// Remove options
$("#selectBox option[value='option1']").remove();

// Add options
$("#selectBox").append('<option value="option6">option6</option>');

Я видел эту работу во всех браузерах.