CODEWITHSUNDEEP
jquery
bensilverfox
bensilverfox

Reputation: 67

Manipulate second <select> based on first <select> values using jQuery

This was branded a duplicate of Populate one dropdown based on selection in another, but I need a jQuery solution that works cross-browser. A lot of what I have found are either vanilla JS or PHP. Just need pure HTML and jQuery. (My original question: How to populate second <select> based on first <select> value)

I have two <select> drop-downs, the second of which needs to be populated by the value selected in the first. How do I go about doing this?

<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 had provided something helpful towards getting there on my other question but was causing some issues on Safari (I had to add disabled by default and switch these out), and on Edge (and I presume IE), the select pop-out menu displays large amounts of white space where the disabled options are, and I can't seem to add some kind of auto height to this.

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');
    }
});

Upvotes: 1

Views: 128

Answers (1)

ChrisPerrin
ChrisPerrin

Reputation: 49

I would use jQuery to add and remove options dynamically from the second optionset.

I found this article:

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>');

I have seen this work in all browsers.

Upvotes: 1

Related Questions