Question

由于jQuery，我与依赖的下拉列表有很多冲突。没有jQuery有没有办法做到这一点？

HTML

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
    <table class="maintable">
        <tr style="line-height:50px;">
            <td>Select Category</td>
            <td>:</td>
            <td>
                <select id="categories">
                    <option values="">--Select--</option>
                    <option> Gezicht en ogen</option>
                    <option> Huid</option>        
                    <option> Lichaam</option>
                    <option> Ontharen</option>
                    <option> Nagels</option>      
                </select>
            </td>
        </tr>
        <tr style="line-height:20px;">
            <td>Select Sub Category</td>
            <td>:</td>
            <td>
                <select style="float:left;" id="subcats">
                </select>
            </td>
        </tr>
        <tr>
            <input type="button" id="btn" value="Ga naar.." />
        </tr>
    </table>
</body>

JAVASCRIPT

    var sub = "";
    var Gezichtenogen = [
        {display: "Gezichtsbehandeling", value: "/gezicht-en-ogen/Gezichtsbehandeling" },
        {display: "Wenkbrauwen en wimpers", value: "/gezicht-en-ogen/Wenkbrauwen-en-wimpers" },
        {display: "Permanente make-up", value: "/gezicht-en-ogen/Permanente-Make-Up" },
        {display: "Rimpelbehandelingen", value: "/gezicht-en-ogen/Rimpelbehandelingen" },
        {display: "Ooglidcorrecties", value: "/gezicht-en-ogen/Ooglidcorrecties" },
        {display: "Wenkbrauwlifting", value: "/gezicht-en-ogen/Wenkbrauwlifting" },
        {display: "Peelings", value: "/gezicht-en-ogen/Peelings" },
        {display: "Acné", value: "/gezicht-en-ogen/Acne" },
        {display: "Huidverjonging", value: "/gezicht-en-ogen/Huidverjonging" }
        ];

    var Huid = [
        {display: "Algemene informatie", value: "/huid/Algemene-informatie" },
        {display: "Pigmentvlekken", value: "/huid/Pigmentvlekken" },
        {display: "Couperose", value: "/huid/Couperose" },
        {display: "Ouderdomsvlekken", value: "/huid/Ouderdomsvlekken" },
        {display: "Rood spinnetje", value: "/huid/Rood-spinnetje"},
        {display: "Steelwratjes", value: "/huid/Steelwratjes"},
        {display: "Talgkliercyste", value: "/huid/Talgkliercyste"}
        ];

    var Lichaam = [
        {display: "Tatoeage verwijderen", value: "/lichaam/Tatoeage-verwijderen" },
        {display: "Beenvaatjes", value: "/lichaam/Beenvaatjes" },
        {display: "Massage", value: "/lichaam/Massage" },
        {display: "Overmatig zweten", value: "/lichaam/Overmatig-zweten" }
        ];

    var Ontharen = [
        {display: "Laser ontharing", value: "/ontharen/Laser-ontharing" },
        {display: "IPL licht", value: "/ontharen/IPL-licht" },
        {display: "Waxen en harsen", value: "/ontharen/Waxen-en-harsen" }
        ];

    var Nagels = [
        {display: "Kalknagels laseren", value: "/nagels/Kalknagels-laseren" },
        {display: "Pedicure", value: "/nagels/Pedicure" }
        ];

        $("#categories").change(function() {
            var parent = $(this).val();
            switch(parent){
                case 'Gezicht en ogen':
                    list(Gezichtenogen);
                    break;
                case 'Huid':
                    list(Huid);
                    break;             
                case 'Lichaam':
                    list(Lichaam);
                    break; 
                case 'Ontharen':
                    list(Ontharen);
                    break; 
                case 'Nagels':
                    list(Nagels);
                    break; 
                default: //default child option is blank
                    $("#subcats").html('');  
                    break;                            }
                });

        function list(array_list)
        {
            $("#subcats").html(""); //reset child options
            $(array_list).each(function (i) { //populate child options
            $("#subcats").append("<option value=\""+array_list[i].value+"\">"+array_list[i].display+"</option>");
            });


        }

        $("#btn").click(function(){
             window.location.href=document.getElementById("subcats").value;
        })`

我不是要求解决我的冲突，只是为了另一种方式来做到这一点。

Answer 1

如果你想避免使用jQuery

，你可以尝试使用普通的JS来实现相同的目标

<强> HTML

<table class="maintable">
        <tr style="line-height:50px;">
            <td>Select Category</td>
            <td>:</td>
            <td>
                <select id="categories" onChange=catChange(this)>
                    <option values="">--Select--</option>
                    <option> Gezicht en ogen</option>
                    <option> Huid</option>        
                    <option> Lichaam</option>
                    <option> Ontharen</option>
                    <option> Nagels</option>      
                </select>
            </td>
        </tr>
        <tr style="line-height:20px;">
            <td>Select Sub Category</td>
            <td>:</td>
            <td>
                <select style="float:left;" id="subcats">
                </select>
            </td>
        </tr>
        <tr>
            <input type="button" id="btn" value="Ga naar.." onClick=javaScript:btnlick() />
        </tr>
    </table>

<强> JAVASCRIPT

var sub = "";
        var Gezichtenogen = [
            {display: "Gezichtsbehandeling", value: "/gezicht-en-ogen/Gezichtsbehandeling" },
            {display: "Wenkbrauwen en wimpers", value: "/gezicht-en-ogen/Wenkbrauwen-en-wimpers" },
            {display: "Permanente make-up", value: "/gezicht-en-ogen/Permanente-Make-Up" },
            {display: "Rimpelbehandelingen", value: "/gezicht-en-ogen/Rimpelbehandelingen" },
            {display: "Ooglidcorrecties", value: "/gezicht-en-ogen/Ooglidcorrecties" },
            {display: "Wenkbrauwlifting", value: "/gezicht-en-ogen/Wenkbrauwlifting" },
            {display: "Peelings", value: "/gezicht-en-ogen/Peelings" },
            {display: "Acné", value: "/gezicht-en-ogen/Acne" },
            {display: "Huidverjonging", value: "/gezicht-en-ogen/Huidverjonging" }
            ];

        var Huid = [
            {display: "Algemene informatie", value: "/huid/Algemene-informatie" },
            {display: "Pigmentvlekken", value: "/huid/Pigmentvlekken" },
            {display: "Couperose", value: "/huid/Couperose" },
            {display: "Ouderdomsvlekken", value: "/huid/Ouderdomsvlekken" },
            {display: "Rood spinnetje", value: "/huid/Rood-spinnetje"},
            {display: "Steelwratjes", value: "/huid/Steelwratjes"},
            {display: "Talgkliercyste", value: "/huid/Talgkliercyste"}
            ];

        var Lichaam = [
            {display: "Tatoeage verwijderen", value: "/lichaam/Tatoeage-verwijderen" },
            {display: "Beenvaatjes", value: "/lichaam/Beenvaatjes" },
            {display: "Massage", value: "/lichaam/Massage" },
            {display: "Overmatig zweten", value: "/lichaam/Overmatig-zweten" }
            ];

        var Ontharen = [
            {display: "Laser ontharing", value: "/ontharen/Laser-ontharing" },
            {display: "IPL licht", value: "/ontharen/IPL-licht" },
            {display: "Waxen en harsen", value: "/ontharen/Waxen-en-harsen" }
            ];

        var Nagels = [
            {display: "Kalknagels laseren", value: "/nagels/Kalknagels-laseren" },
            {display: "Pedicure", value: "/nagels/Pedicure" }
            ];


            function catChange(x) {
                var parent = x.options[x.selectedIndex].value;
                switch(parent){
                    case 'Gezicht en ogen':
                        list(Gezichtenogen);
                        break;
                    case 'Huid':
                        list(Huid);
                        break;             
                    case 'Lichaam':
                        list(Lichaam);
                        break; 
                    case 'Ontharen':
                        list(Ontharen);
                        break; 
                    case 'Nagels':
                        list(Nagels);
                        break; 
                    default: //default child option is blank
                        document.getElementById("subcats").html('');  
                        break;                            }
                    }

            function list(array_list)
            {
                document.getElementById("subcats").innerHTML=""; //reset child options
                array_list.forEach(function (i) { //populate child options
               var node= document.createElement("OPTION");
               node.value = i.value;
               var textNode=document.createTextNode(i.display);
               node.appendChild(textNode);
               console.log(node.appendChild(textNode));
               console.log(node);
                document.getElementById("subcats").appendChild(node);

                });


            }

            function btnlick(){
                 window.location.href=document.getElementById("subcats").value;
            }

javascript依赖下拉

1 个答案: