联级选择 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <title>Document</title>
</head>
<style>

</style>

<body>
    <select id="province" name="province">
        <option value="select">请选择...</option>    
        <option value="hebei">河北省</option>    
        <option value="liaoning">辽宁省</option>    
        <option value="shandong">山东省</option>            
    </select>
    
    <select name="city">
        <option value="select">请选择...</option>    
        
    </select>
    <script type="text/javascript">
        $(function(){
            var liaoning_city = ["沈阳", "大连", "鞍山", "锦州", "丹东"];            
            var hebei_city = ["石家庄", "唐山", "秦皇岛", "衡水", "保定"];
            var shandong_city = ["济南", "青岛","烟台市","淄博"];
            
            $("select[name='province']").change(function() {
                //被选中的option
                var selected_value = $(this).val();
                
                if(selected_value == "select"){
                    $("select[name='city']").empty();
                    var option = $("<option>").val('请选择...').text('请选择...');
                          $("select[name='city']").append(option);
                    
                }else if(selected_value == "liaoning"){ //安徽
                    $("select[name='city']").empty();
                    //循环添加
                    for(var i = 0; i < liaoning_city.length; i++) {
                        var option = $("<option>").val(liaoning_city[i]).text(liaoning_city[i]);
                          $("select[name='city']").append(option);
                    }
                    
                }else if(selected_value == "hebei"){ //河北
                    $("select[name='city']").empty();
                    //循环添加
                    for(var i = 0; i < hebei_city.length; i++) {
                        var option = $("<option>").val(hebei_city[i]).text(hebei_city[i]);
                          $("select[name='city']").append(option);
                    }
                    
                }else if(selected_value == "shandong"){ //山东
                     $("select[name='city']").empty();
                    //循环添加
                    for(var i = 0; i < shandong_city.length; i++) {
                        var option = $("<option>").val(shandong_city[i]).text(shandong_city[i]);
                          $("select[name='city']").append(option);
                    }
                }
            });
                            
        });
</script>
</body>

</html>

 

posted @ 2021-04-23 18:10  Sherlockmmc  阅读(88)  评论(0)    收藏  举报