set default values for dependent dropdown selection

Question

I have 2 dropdown selection where the 2nd dropdown depends on the first one. So if you choose a car from USA the 2nd dropdown will provide you either Tesla or Ford.

I'm trying to set a default value for Japan AND Nissan; so at the end of the script I placed:

 $(countryID).val('JAPAN');  //perfect! works great

and

$(carID).val('Nissan');   //Nope! doesnt work

My code is also on jsfiddle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

                        <div class="form-row">
                            <div class="form-group col-md-5">
                                <select class="form-control input-sm" style="font-size:14px; font-family:Arial, Helvetica, sans-serif;" id="select-country" name="selectTerminal1" ></select>
                                <small style="font-size:14px;color:red" id="terminals-error-id"></small>
                            </div>
                            
                        <div class="form-group col-md-7">
                                <select class="form-control input-sm" style="font-size:14px; font-family:Arial, Helvetica, sans-serif;" id="select-car"  ></select>
                            </div>
                        </div>

and the script

    var countries = ['USA','JAPAN']
    
    const c1 = {'country':'USA', 'name':'Ford'};
    const c2 = {'country':'USA', 'name':'Tasla'};
    const c3 = {'country':'JAPAN', 'name':'Nissan'};
    const c4 = {'country':'JAPAN', 'name':'Toyota'};
    
    var cars = [c1,c2,c3,c4];

    const countryID      = '#select-country'
    const carID     = '#select-car'
    
    //dropdown  1: by country                   
    countries = Array.from(new Set(countries)).sort();
    $(countryID).append(new Option('-- Select Country --', -1, true, true));
    countries.forEach(country =>{
        $(countryID).append(new Option(country, country, true, true));
        $(carID).append(new Option('--all cars--', country, true, true));
    });

    //dropdown 2: by name (dependent on country)
    cars.forEach(item =>{
        const country = item['country'];
        const tName   = item['name'];
        $(carID).append(new Option(tName, country, true, true));
    });


    //dependency
    var $selectcar1 = $( countryID ),
        $selectcar2 = $( carID ),

        $options = $selectcar2.find( 'option' );

        $selectcar1.on( 'change', function() {
                            $selectcar2.html( $options.filter( '[value="' + this.value + '"]' ) );
                        } ).trigger( 'change' );


    //default
    $(countryID).val('JAPAN');
    //$(carID).val('Nissan');   
     

Answer 1

Your comment asks how to do it if you didn't write the line causing the problem. Therefore, assuming you ONLY have control over the default, you can - fix the fact that your select isn't triggering change, and select the option by text, which frankly I don't even know how to do in jquery so here's vanilla script for it.

Credit to this answer too

//default
        $(countryID).val('JAPAN');
        $(countryID).trigger('change');
        let dd = document.getElementById('select-car');
        dd.selectedIndex = [...dd.options].findIndex (option => option.text === "Nissan");