前端_jquery多项级联

<!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">

    <link rel="stylesheet" href="/css/multipleCascade.css">

    <title>多项级联</title>

</head>

<body>

    <!-- <input type="radio" name="language" value="java" checked>java

    <input type="radio" name="language" value="javascript">javascript

    <input type="radio" name="language" value="c++">c++ -->

    <select class="category" οnchange="firstChose()">

        <option style="display: none" selected></option>

        <option value="wujin">五金</option>

        <option value="jiadian">家电</option>

        <option value="zhinengjiaju">智能家居</option>

        <option value="shineizhuangxiu">室内装修</option>

    </select>

    <select class="Compty" οnchange="productChose()"></select>

    <select class="Product" οnchange="addSelect()"></select>

    <div style="height: 60px;width: 1200px;background-color: aqua;" class="date-selection" οndblclick="operating()">

    </div>

</body>

<script src="/javaScript/jquery-1.11.3 (1).js"></script>

<script>

    var heardWareCompty = ["振海五金", "大牛五金", "好赖是个五金", "不知名五金公司"];

    var homeAppliances = ["小米家电", "长虹家电", "BOSS厨房电器", "乱入的家电公司"];

    var smartHome = ["小米智能家居", "华为智能家居", "三星智能家电", "阿里智能化家居"];

    var interiorRenovation = ["共振设计", "戴忛", "MADA", "陈德坚设计公司"];

    function firstChose() {

        var categoryOption = $(".category").find("option:selected").text();

        var homeAppliancesText = $(".category").find("option:selected").text();

        var smartHomeText = $(".category").find("option:selected").text();

        var interiorRenovationText = $(".category").find("option:selected").text();

        $(".Compty").empty();

        var categoryOptionValue = $(".category").val();

        if (categoryOptionValue == "wujin") {

            for (var i = 0; i <= 4; i++) {

                heardWareCompty[i];

            }

            for (var i = 0; i < 4; i++) {

                $(".Compty").append("<option value='" + heardWareCompty[i] + "'>" + heardWareCompty[i] + "</option>");

            }

        }

        var homeAppliancesValue = $(".category").val();

        if (homeAppliancesValue == "jiadian") {

            for (var i = 0; i <= 4; i++) {

                homeAppliances[i];

            }

            for (var i = 0; i < 4; i++) {

                $(".Compty").append("<option value='" + homeAppliances[i] + "'>" + homeAppliances[i] + "</option>");

            }

        }

        var smartHomeTextValue = $(".category").val();

        if (smartHomeTextValue == "zhinengjiaju") {

            for (var i = 0; i < 4; i++) {

                smartHome[i];

            }

            for (var i = 0; i < 4; i++) {

                $(".Compty").append("<option value='" + smartHome[i] + "'>" + smartHome[i] + "</option>")

            }

        }

        var interiorRenovationTextValue = $('.category').val();

        if (interiorRenovationTextValue == "shineizhuangxiu") {

            for (var i = 0; i < 4; i++) {

                interiorRenovation[i];

            }

            for (var i = 0; i < 4; i++) {

                $(".Compty").append("<option value='" + interiorRenovation[i] + "'>" + interiorRenovation[i] +

                    "</option>")

            }

        }

    };

    // 五金

    // var arr=[{"zhenHaiComptyProduct":["振海插座", "振海水龙头", "振海钢管", "振海分电器"]},{"daNiuComptyProduct":["大牛插座", "大牛水龙头", "大牛钢管", "大牛分电器"]}]//对象

    var zhenHaiComptyProduct = ["振海插座", "振海水龙头", "振海钢管", "振海分电器"];

    var daNiuComptyProduct = ["大牛插座", "大牛水龙头", "大牛钢管", "大牛分电器"];

    var haoLaiComptyProduct = ["好赖插座", "好赖水龙头", "好赖钢管", "好赖分电器"];

    var unknownProduct = ["不明插座", "不明水龙头", "不明赖钢管", "不明分电器"];

    // 家居

    var xiaoMinProduct = ["小米电视", "小米电饭煲", "小米灯泡", "小米风扇"];

    var changHongProduct = ["长虹电视", "长虹电饭煲", "长虹灯泡", "长虹风扇"];

    var BOSSProduct = ["BOSS电视", "BOSS电饭煲", "BOSS灯泡", "BOSS风扇"];

    var luanruProduct = ["乱入电视", "乱入电饭煲", "乱入灯泡", "乱入风扇"];

    //智能家居

    var xiaoMiSmartHome = ["小米智能电视", "小米智能电饭煲", "小米智能灯泡", "小米智能风扇"];

    var huaWeiSmartHome = ["华为智能电视", "华为智能电饭煲", "华为智能灯泡", "华为智能风扇"];

    var sanXingSmartHome = ["三星智能电视", "三星智能电饭煲", "三星智能灯泡", "三星智能风扇"];

    var aLiSmartHome = ["阿里智能电视", "阿里智能电饭煲", "阿里智能灯泡", "阿里智能风扇"];

    //室内装修

    var gongZhenDecoration = ["共振全包", "共振厨房", "共振卫生间", "共振客厅"];

    var daiFanDecoration = ["戴忛全包", "戴忛厨房", "戴忛卫生间", "戴忛客厅"];

    var MADADecoration = ["MADA全包", "MADA厨房", "MADA卫生间", "MADA客厅"];

    var deJianecoration = ["陈德坚全包", "陈德坚厨房", "陈德坚卫生间", "陈德坚客厅"];

    function productChose() {

        // var zhenHaiComptyProductText = $(".Compty").find("option:selected").text();

        // var daNiuComptyProductText = $(".Compty").find("option:selected").text();

        // var haoLaiComptyProductText = $(".Compty").find("option:selected").text();

        // var unknownProductText = $(".Compty").find("option:selected").text();

        $(".Product").empty();

        var zhenHaiComptyProductTextValue = $(".Compty").val();

        var daNiuComptyProductTextValue = $(".Compty").val();

        var haoLaiComptyProductTextValue = $(".Compty").val();

        var unknownProductTextValue = $(".Compty").val();

        if (zhenHaiComptyProductTextValue == "振海五金") {

            for (var i = 0; i < 4; i++) {

                zhenHaiComptyProduct[i];

            }

            for (var i = 0; i < 4; i++) {

                $(".Product").append("<option value='" + zhenHaiComptyProduct[i] + "'>" + zhenHaiComptyProduct[i] +

                    "</option>");

            }

        }

        if (daNiuComptyProductTextValue == "大牛五金") {

            for (var i = 0; i < 4; i++) {

                daNiuComptyProduct[i];

            }

            for (var i = 0; i < 4; i++) {

                $(".Product").append("<option value='" + daNiuComptyProduct[i] + "'>" + daNiuComptyProduct[i] +

                    "</option>");

            }

        }

        if (haoLaiComptyProductTextValue == "好赖是个五金") {

            for (var i = 0; i < 4; i++) {

                haoLaiComptyProduct[i];

            }

            for (var i = 0; i < 4; i++) {

                $(".Product").append("<option value='" + haoLaiComptyProduct[i] + "'>" + haoLaiComptyProduct[i] +

                    "</option>");

            }

        }

        if (unknownProductTextValue == "不知名五金公司") {

            for (var i = 0; i < 4; i++) {

                unknownProduct[i];

            }

            for (var i = 0; i < 4; i++) {

                $(".Product").append("<option value='" + unknownProduct[i] + "'>" + unknownProduct[i] + "</option>");

            }

        }

        var xiaoMinProductValue = $(".Compty").val();

        var changHongProductValue = $(".Compty").val();

        var BOSSProductValue = $(".Compty").val();

        var luanruProductValue = $(".Compty").val();

        if (xiaoMinProductValue == "小米家电") {

            for (var i = 0; i < 4; i++) {

                xiaoMinProduct[i];

            }

            for (var i = 0; i < 4; i++) {

                $(".Product").append("<option value='" + xiaoMinProduct[i] + "'>" + xiaoMinProduct[i] + "</option>");

            }

        }

        if (changHongProductValue == "长虹家电") {

            for (var i = 0; i < 4; i++) {

                changHongProduct[i];

            }

            for (var i = 0; i < 4; i++) {

                $(".Product").append("<option value='" + changHongProduct[i] + "'>" + changHongProduct[i] +

                    "</option>");

            }

        }

        if (BOSSProductValue == "BOSS厨房电器") {

            for (var i = 0; i < 4; i++) {

                BOSSProduct[i];

            }

            for (var i = 0; i < 4; i++) {

                $(".Product").append("<option value='" + BOSSProduct[i] + "'>" + BOSSProduct[i] + "</option>");

            }

        }

        if (BOSSProductValue == "乱入的家电公司") {

            for (var i = 0; i < 4; i++) {

                luanruProduct[i];

            }

            for (var i = 0; i < 4; i++) {

                $(".Product").append("<option value='" + luanruProduct[i] + "'>" + luanruProduct[i] + "</option>");

            }

        }

        var xiaoMiSmartHomeValue = $(".Compty").val();

        var huaWeiSmartHomeValue = $(".Compty").val();

        var sanXingSmartHomeValue = $(".Compty").val();

        var aLiSmartHomeValue = $(".Compty").val();

        if (xiaoMiSmartHomeValue == "小米智能家居") {

            for (var i = 0; i < 4; i++) {

                xiaoMiSmartHome[i];

            }

            for (var i = 0; i < 4; i++) {

                $(".Product").append("<option value='" + xiaoMiSmartHome[i] + "'>" + xiaoMiSmartHome[i] + "</option>");

            }

        }

        if (huaWeiSmartHomeValue == "华为智能家居") {

            for (var i = 0; i < 4; i++) {

                huaWeiSmartHome[i];

            }

            for (var i = 0; i < 4; i++) {

                $(".Product").append("<option value='" + huaWeiSmartHome[i] + "'>" + huaWeiSmartHome[i] + "</option>");

            }

        }

        if (sanXingSmartHomeValue == "三星智能家电") {

            for (var i = 0; i < 4; i++) {

                sanXingSmartHome[i];

            }

            for (var i = 0; i < 4; i++) {

                $(".Product").append("<option value='" + sanXingSmartHome[i] + "'>" + sanXingSmartHome[i] +

                    "</option>");

            }

        }

        if (aLiSmartHomeValue == "阿里智能化家居") {

            for (var i = 0; i < 4; i++) {

                aLiSmartHome[i];

            }

            for (var i = 0; i < 4; i++) {

                $(".Product").append("<option value='" + aLiSmartHome[i] + "'>" + aLiSmartHome[i] + "</option>");

            }

        }

        var gongZhenDecorationValue = $(".Compty").val();

        var daiFanDecorationValue = $(".Compty").val();

        var MADADecorationValue = $(".Compty").val();

        var deJianecorationValue = $(".Compty").val();

        if (gongZhenDecorationValue == "共振设计") {

            for (var i = 0; i < 4; i++) {

                gongZhenDecoration[i];

            }

            for (var i = 0; i < 4; i++) {

                $(".Product").append("<option value='" + gongZhenDecoration[i] + "'>" + gongZhenDecoration[i] +

                    "</option>");

            }

        }

        if (daiFanDecorationValue == "戴忛") {

            for (var i = 0; i < 4; i++) {

                daiFanDecoration[i];

            }

            for (var i = 0; i < 4; i++) {

                $(".Product").append("<option value='" + daiFanDecoration[i] + "'>" + daiFanDecoration[i] +

                    "</option>");

            }

        }

        if (MADADecorationValue == "MADA") {

            for (var i = 0; i < 4; i++) {

                MADADecoration[i];

            }

            for (var i = 0; i < 4; i++) {

                $(".Product").append("<option value='" + MADADecoration[i] + "'>" + MADADecoration[i] + "</option>");

            }

        }

        if (deJianecorationValue == "陈德坚设计公司") {

            for (var i = 0; i < 4; i++) {

                deJianecoration[i];

            }

            for (var i = 0; i < 4; i++) {

                $(".Product").append("<option value='" + deJianecoration[i] + "'>" + deJianecoration[i] + "</option>");

            }

        }

    }

    function addSelect() {

        var selectIn = $(".Product").find("option:selected").val();

        var dateSelection = [];

        var vals = $('.selectTitle').map(function (index) {

            // this callback function will be called once for each matching element

            dateSelection.push($(this).text());

        });

        if (dateSelection.indexOf($(".Product").find("option:selected").val()) == -1) {

            //add

            $(".date-selection").append("<span class=" + "selectTitle value='" + selectIn + "'"+ "οnclick="+" classss() "+">" +

            selectIn + "<input type=" + "text" + ">" + "</span>");

        }

    }

    function operating() {

        var dateSelection = [];

        var vals = $('.selectTitle').map(function (index) {

            // this callback function will be called once for each matching element

            dateSelection.push($(this).text());

        });

        console.log(dateSelection);

        if (dateSelection.indexOf($(".Product").find("option:selected").val()) == -1) {

            //add

            $(".date-selection").append("<span class=" + "selectTitle value='" + selectIn + "'>" +

            selectIn + "<input type=" + "text" + ">" + "</span>");

        }

        // var p = $(".date-selection span").map(function () {

        //     $(this).val();

        // }).get();

        // if (arr.indexOf($(this).val()) == -1) {

        //     //add

        // }

    }

    function classss(){

        $('.selectTitle').remove();

    }

</script>

</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值