下拉列表的级联操作在日常使用中十分平常

我们先简单的使用JQuery代码实现下拉列表级联操作
先看一下下拉列表代码

国家：
```
    <option>
    城市
    </option>
</select>
```
要求选择不同的国家，城市下拉列表显示所选国家的各个城市

先了解一下JQuery里面一些功能

下拉列表发生了变化（选中的选项改变）

$(“#select1”).change(function () {
}
select中的其中一个option被选中，选中返回true，没有选中返回false

var boo=$(“#option1”).is(“:checked”);
选中的文本是否等于“中国”（记得要加trim().html中默认有空格）

$(“option:selected”).text().trim()==”中国”
下拉列表添加一个option
第一种发生

var option = ‘‘
```
        $("#select2").append(option);
```

第二种方式

var $option=$("<option></option>");
            $option.text("上海");
            $("#select2").append($option);

列表清空

$(“#select2”).empty();

JQuery整体代码

$("#select1").change(function () {
        $("#select2").empty();
        var boo=$("#option1").is(":checked");
        var boo2=$("#option2").is(":checked");
        $("option:selected").text();
        if( $("option:selected").text().trim()=="日本"){
            var option = '<option value="dj">'+"东京"+'</option>'
            $("#select2").append(option);
            var $option=$("<option></option>");
            $option.text("大阪");
            $("#select2").append($option);
        }
        if( $("option:selected").text().trim()=="中国"){
            var option = '<option value="bj">'+"北京"+'</option>'
            $("#select2").append(option);
            var $option=$("<option></option>");
            $option.text("上海");
            $("#select2").append($option);
        }
        console.log($("option:selected").text());
        console.log(boo);
        console.log(boo2);
    // if(boo){
    //    
    //     var option = '<option value="bj">'+"北京"+'</option>'
    //     $("#select2").append(option);
    //
    //     console.log("北京");
       // }
    // if(boo2){
    //     var option = '<option value="dj">'+"东京"+'</option>'
    //     $("#select2").append(option);
    // }
    var ed=$("#select1 option:selected").text();
    console.log(ed);
    });