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

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

我试图为日本和日产设定一个默认值；因此，在脚本的末尾，我放置了：

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

及

我的密码也在上面

---

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

功劳

---

你所有的车都有一个日本或美国的价值-你做车下拉的方式很有趣…我认为你需要重新思考一下逻辑。如果您需要同时进行筛选，可以在第二个下拉列表中使用数据属性将汽车与国家/地区关联起来。如果你在小提琴中检查浏览器中的下拉元素，你会看到所有的汽车都有相同的值，这不会真正起作用。@Nikki9696谢谢你的指针。您可以在浏览器中共享如何检查该元素吗？运行您的小提琴，右键单击该元素，然后检查？但您是有意在此处编写它的

$（carID）.append（新选项（'--all cars--'，country，true，true））-然后使用它来过滤onchange，所以不能仅仅更改它。您必须添加其他内容以进行筛选。@Nikki9696好的，我现在知道如何检查（谢谢）不确定我是否理解您的上述评论。说我没弄对那句话。如何设置默认值？谢谢；非常感谢！
$(carID).val('Nissan');   //Nope! doesnt work

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

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