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

问题描述

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

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

 $(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,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));
        $(carID).append(new Option('--all cars--',true));
    });

    //dropdown 2: by name (dependent on country)
    cars.forEach(item =>{
        const country = item['country'];
        const tName   = item['name'];
        $(carID).append(new Option(tName,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');   
     

解决方法

如果您没有写出导致问题的行，您的评论会询问如何操作。因此，假设您只能控制默认值，您可以 - 修复您的选择不会触发更改的事实，并通过文本选择选项，坦率地说，我什至不知道如何在 jquery 中执行，所以这里是香草脚本为它。

信用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");