Html + js; Aufgefüllt Wählen Sie

Question

Ich brauche eine einfache bedingte Auswahl für meine HTML-Formular wie dieses Beispiel (noch keine JS und CSS haben).

Logic: Wenn Category1 für jede 'value' oder jede 'comment' ausgewählt, wird es bei der Auswahl der Category2 zeigen nur, Category3 und Kategorie4 die nur gleiche 'rel' Tag aus Category1 ist haben.

<select id='category1' required> 
 
    <option rel='A' value='value1'>Option One</option> 
 
    <option rel='A' value='value2'>Option Two</option> 
 
    <option rel='C' value='value3'>Option Three</option> 
 
    <option rel='B' value='value4'>Option Four</option> 
 
    <option rel='C' value='value5'>Option Five</option> 
 
</select> 
 

 
<select id='category2' required> 
 
    <option rel='A' value='value11'>Sub A</option> 
 
    <option rel='A' value='value12'>Sub B</option> 
 
    <option rel='A' value='value13'>Sub C</option> 
 
    <option rel='B' value='value14'>Sub D</option> 
 
    <option rel='B' value='value15'>Sub E</option> 
 
    <option rel='C' value='value16'>Sub F</option> 
 
    <option rel='C' value='value17'>Sub G</option> 
 
    <option rel='A' value='value18'>Sub H</option> 
 
</select> 
 

 
<select id='category3' required> 
 
    <option rel='A' value='AAA'>Some A</option> 
 
    <option rel='B' value='BBB'>Some B</option> 
 
    <option rel='C' value='CCC'>Some C</option> 
 
</select> 
 

 
<select id='category4'> 
 
    <option rel='A' value='DDD'>Other A</option> 
 
    <option rel='B' value='EEE'>Other B</option> 
 
    <option rel='B' value='FFF'>Other C</option> 
 
    <option rel='B' value='GGG'>Other C</option> 
 
</select>

Answer 1

Ich denke, das ist das, was Sie suchen; zumindest der Anfang davon.

https://jsfiddle.net/v5xvcsub/

document.getElementById("category1").addEventListener("change", function(e) { 
    var selectedRel = this.options[this.selectedIndex].getAttribute('rel'); 

    var selects = document.getElementsByTagName('select'); 
    for (index = 0; index < selects.length; ++index) { 
    // deal with inputs[index] element. 
    select = selects[index]; 
    if (select.id !== "category1") { 
     var options = select.options; 
     for (index in options) { 
     try { 
      if (options[index].getAttribute('rel') == selectedRel) { 
      options[index].style.display = null; 
      } else { 
      options[index].style.display = "none"; 
      } 
     } catch (e) { 
      //fail silently for invalid input 
     } 
     } 
    } 
    } 
}); 

Wenn ein Element in category1 ausgewählt wird, es wird eine Schleife durch die anderen wählt und dann die Schleife durch ihre jeweiligen Möglichkeiten.

Answer 2

Es funktioniert jetzt, danke für den "Trigger".

Und besonderen Dank an Bro Arga, für die Fertigstellung.

document.getElementById("category1").addEventListener("change", function(e) { 
 
    var selectedRel = this.options[this.selectedIndex].getAttribute('rel'); 
 

 
    var selects = document.getElementsByTagName('select'); 
 
    for (index = 0; index < selects.length; ++index) { 
 
    // deal with inputs[index] element. 
 
    select = selects[index]; 
 
    if (select.id !== "category1") { 
 
     var options = select.options; 
 
     console.log(select); 
 
     for (idx in options) { 
 
     console.log(options[idx]); 
 
     try { 
 
      if (options[idx].getAttribute('rel') == selectedRel) { 
 
      options[idx].style.display = null; 
 
      } else { 
 
      options[idx].style.display = "none"; 
 
      } 
 
     } catch (e) { 
 
      //fail silently for invalid input 
 
     } 
 
     } 
 
    } 
 
    } 
 
});

<select id='category1' required> 
 
    <option rel='A' value='value1'>Option One</option> 
 
    <option rel='A' value='value2'>Option Two</option> 
 
    <option rel='C' value='value3'>Option Three</option> 
 
    <option rel='B' value='value4'>Option Four</option> 
 
    <option rel='C' value='value5'>Option Five</option> 
 
</select> 
 

 
<select id='category2' required> 
 
    <option rel='A' value='value11'>Sub A</option> 
 
    <option rel='A' value='value12'>Sub B</option> 
 
    <option rel='A' value='value13'>Sub C</option> 
 
    <option rel='B' value='value14'>Sub D</option> 
 
    <option rel='B' value='value15'>Sub E</option> 
 
    <option rel='C' value='value16'>Sub F</option> 
 
    <option rel='C' value='value17'>Sub G</option> 
 
    <option rel='A' value='value18'>Sub H</option> 
 
</select> 
 

 
<select id='category3' required> 
 
    <option rel='A' value='AAA'>Some A</option> 
 
    <option rel='B' value='BBB'>Some B</option> 
 
    <option rel='C' value='CCC'>Some C</option> 
 
</select> 
 

 
<select id='category4'> 
 
    <option rel='A' value='DDD'>Other A</option> 
 
    <option rel='B' value='EEE'>Other B</option> 
 
    <option rel='B' value='FFF'>Other C</option> 
 
    <option rel='B' value='GGG'>Other C</option> 
 
</select>