JavaScript依賴下拉

-2

由於jQuery我與我的依賴下拉有很多衝突。有沒有辦法沒有jQuery做到這一點？JavaScript依賴下拉

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

我不要求我衝突的修復，只是另一種方式來做到這一點。

來源

2016-02-17 user3520672

使用角度，還是陣營如果jQuery是困擾您。 –

Angular使這非常簡單。 –

你有它的例子嗎？我對Angular沒有任何經驗。如果我將它與Joomla一起使用，它會起作用嗎？ – user3520672

您可以嘗試純JS實現相同的，如果你想避免的jQuery

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

來源

2016-02-17 10:28:53 RRR

這裏是演示：http://codepen.io/anon/pen/WrWpWO – RRR

正是我需要的！非常感謝你！ – user3520672

樂於幫助:) – RRR

JavaScript依賴下拉

回答

相關問題