总结之下拉列表级联操作（一）——简单使用JQuery实现

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

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

国家：<select id="select1">
	    <option id="option1">中国</option>
	    <option id="option2">日本</option>
	</select><br>
城市：<select id="select2">
		<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 = '<option value="bj">'+"北京"+'</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);
    });