三級聯動

時間 2019-11-18
標籤三級聯動简体版
原文原文鏈接
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
    body{
        font-size: 13px;
    }
    .clsInit{
        width: 450px;
        height: 35px;
        line-height: 35px;
        padding-left: 10px;
    }
    .clsTip{
        padding-top: 5px;
        background-color: #eee;
        display: none;
    }
    .btn{
        border: 1px solid #666;
        padding: 2px;
        width: 65px;
        float: right;
        margin-top: 6px;
        margin-right: 6px;     
    }
    </style>
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript">
    $(function(){
        function objInit(obj){
            return $(obj).html("<option>請選擇</option>");
        }
        var arrData = {
            廠商1:{品牌1_1: "型號1_1_1, 型號1_1_2", 品牌1_2: "型號1_2_1, 型號1_2_2"},
            廠商2:{品牌2_1: "型號2_1_1, 型號2_1_2", 品牌2_2: "型號2_2_1, 型號2_2_2"},
            廠商3:{品牌3_1: "型號3_1_1, 型號3_1_2", 品牌3_2: "型號3_2_1, 型號3_2_2"}
        };
   
        $.each(arrData,function(pF) {
            $("#selF").append("<option>"+pF+"</option>");
        });
   
        $("#selF").change(function() {
            objInit("#selT");
            objInit("#selC");
            $.each(arrData,function(pF, pS) {
                if ($("#selF option:selected").text() == pF) {
                    //遍歷數據增長品牌項
                    $.each(pS,function(pT,pC) {   
                        $("#selT").append('<option>'+pT+'</option>');                      
                    });
   
                    //品牌列表change事件
                    $("#selT").change(function() {
                        objInit("#selC");
                        $.each(pS,function(pT, pC) {
                            if ($("#selT option:selected").text() == pT) {
                                $.each(pC.split(","),function() {
                                    $("#selC").append('<option>'+this+'</option>');
                                });
                            };
                        });
                    });                
   
                };
            });
        });
   
        $("#Button1").click(function() {
            var strValue = "您選擇的是：";
            strValue += $("#selF option:selected").text();
            strValue += "&nbsp;&nbsp;品牌：";
            strValue += $("#selT option:selected").text();
            strValue += "&nbsp;&nbsp;型號：";
            strValue += $("#selC option:selected").text();
            $("#divTip").show().addClass('clsTip').html(strValue);
        });
   
    });
</script>
<title>jQuery實現select三級聯動</title>
</head>
<body>
    <div class="clsInit">
        廠商：<select id="selF"><option>請選擇</option></select>
        品牌：<select id="selT"><option>請選擇</option></select>
        型號：<select id="selC"><option>請選擇</option></select>
        <input id="Button1" type="button" value="查詢" class="btn"/>
    </div>
    <div class="clsInit" id="divTip"></div>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。