为相关下拉选择设置默认值

Question

我有 2 个下拉选择，其中第二个下拉列表取决于第一个。 因此，如果您从美国选择汽车，第二个下拉菜单将为您提供特斯拉或福特。

我正在尝试为日本和日产设置默认值； 所以在我放置的脚本的末尾：

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

和

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

我的代码也在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>

和脚本

    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

您的评论询问如果您没有写出导致问题的行，该怎么做。 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为了它。

也归功于这个答案

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