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

亦凉 2022-05-13 09:10 219阅读 0赞

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

*  我们先简单的使用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);
        });