javascript相关下拉列表_Javascript_Jquery_Drop Down Menu

javascript相关下拉列表

javascript jquery drop-down-menu

javascript相关下拉列表,javascript,jquery,drop-down-menu,Javascript,Jquery,Drop Down Menu,由于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">

由于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>

<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" }
        ];

        $("#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;
        })`

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;
            }

var sub=”“；
var Gezichtenogen=[
{显示：“gezichtsbehandleing”，值：“/gezicht en-ogen/gezichtsbehandleing”}，
{显示：“Wenkbrauwen-en-wimpers”，值：“/gezicht-en-ogen/Wenkbrauwen-en-wimpers”}，
{显示：“Permanente化妆”，值：“/gezicht en-ogen/Permanente化妆”}，
{显示：“rimpelbehandlingen”，值：“/gezicht en-ogen/rimpelbehandlingen”}，
{显示：“Ooglidcorrecties”，值：“/gezicht en-ogen/Ooglidcorrecties”}，
{显示：“Wenkbrauwlifting”，值：“/gezicht en-ogen/Wenkbrauwlifting”}，
{显示：“剥皮”，值：“/gezicht en-ogen/Peelings”}，
{显示：“Acné”，值：“/gezicht en-ogen/痤疮”}，
{显示：“Huidverjonging”，值：“/gezicht en-ogen/Huidverjonging”}
];
var Huid=[
{显示：“Algemene informatie”，值：“/huid/Algemene informatie”}，
{显示：“色素Vlekken”，值：“/huid/色素Vlekken”}，
{显示：“Couperose”，值：“/huid/Couperose”}，
{显示：“Ouderdomsvlekken”，值：“/huid/Ouderdomsvlekken”}，
{显示：“Rood spinnetje”，值：“/huid/Rood spinnetje”}，
{显示：“Steelwratjes”，值：“/huid/Steelwratjes”}，
{显示：“Talgliercyste”，值：“/huid/Talgliercyste”}
];
var Lichaam=[
{显示：“Tatoeage verwijderen”，值：“/lichaam/Tatoeage verwijderen”}，
{显示：“Beenvaatjes”，值：“/lichaam/Beenvaatjes”}，
{显示：“按摩”，值：“/lichaam/按摩”}，
{显示：“Overmatig zweten”，值：“/lichaam/Overmatig zweten”}
];
var Ontharn=[
{显示：“Laser ontharing”，值：“/ontharing/Laser ontharing”}，
{显示：“IPL licht”，值：“/OnShare/IPL licht”}，
{显示：“Waxen-en-harsen”，值：“/ontharn/Waxen-harsen”}
];
变量Nagels=[
{显示：“Kalknagels laseren”，值：“/nagels/Kalknagels laseren”}，
{显示：“足疗”，值：“/nagels/Pedicure”}
];
$（“#类别”）。更改（函数（）{
var parent=$（this.val（）；
交换机（父级）{
“Gezicht en-ogen”案：
名单（Gezichtenogen）；
打破
案例“Huid”：
名单（Huid）；
打破
“利查姆”案：
名单（利查姆）；
打破
“Onthare”案例：
名单(登记册);；
打破
“Nagels”一案：
列表（Nagels）；
打破
default://默认子选项为空
$（“#子类别”）.html（“”）；
中断；}
});
函数列表（数组列表）
{
$（“#子类别”）.html（“”；//重置子选项
$（数组列表）。每个（函数（i）{//填充子选项
$（“#子类别”）.append（“+array_list[i].display+”）；
});
}
$（“#btn”）。单击（函数（）{
window.location.href=document.getElementById（“子类别”）.value；
})`

我不是在要求解决我的冲突，只是想用另一种方法来解决

如果您想避免jQuery，可以尝试使用纯JS来实现相同的效果

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>

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

使用Angular，或者在Jquery困扰您时做出反应。Angular让这变得非常简单。您有这样的例子吗？我在这方面没有任何经验。如果我和Joomla一起使用它，它能工作吗？这里是演示：正是我需要的！非常感谢你！