Tworzenie menu rozwijanego, które pojawia się na podstawie odpowiedzi z innego menu rozwijanego

Question

Próbuję utworzyć stronę, na której użytkownicy będą musieli dokonać wielu wyborów, które są ze sobą oparte. Jak utworzyć formularz w taki sposób, że pojawia się określony typ menu rozwijanego nr 2 w oparciu o wybór użytkownika z menu rozwijanego nr 1.

Na przykład, powiedzmy, że użytkownik musi wybrać "kategorię produktu" i "podkategorię produktu". Jeśli użytkownik wybierze "pościel" z pierwszego menu rozwijanego, automatycznie pojawi się drugie menu rozwijane z opcjami takimi jak "łóżko, materac, poduszka".

Aby przybliżyć ten przykład, powiedzmy, że użytkownik wybrał "elektronikę" zamiast "pościel". Następnie drugie menu rozwijane będzie miało opcje takie jak "tv, odtwarzacze mp3, komputery".

Jak można zrobić coś takiego? Czy to coś, co zrobiłbyś w HTML/CSS lub jakiejś innej formie?

Dzięki za pomoc!

EDYCJA - Używam Django/Python do stworzenia tej strony wraz z HTML, CSS i JavaScript.

Answer 1

Można użyć kombinacji HTML i JavaScript (JSFIDDLE):

<select id="opts" onchange="showForm()"> 
    <option value="0">Select Option</option> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
</select> 

<div id="f1" style="display:none"> 
    <form name="form1"> 
     <select id="opts" onchange="showForm()"> 
      <option value="0">Select Option</option> 
      <option value="1">Option 1A</option> 
      <option value="2">Option 1B</option> 
     </select> 
    </form> 
</div> 

<div id="f2" style="display:none"> 
    <form name="form2"> 
     <select id="opts" onchange="showForm()"> 
      <option value="0">Select Option</option> 
      <option value="1">Option 2A</option> 
      <option value="2">Option 2B</option> 
     </select> 
    </form> 
</div> 

<script type="text/javascript"> 
    function showForm() { 
     var selopt = document.getElementById("opts").value; 
     if (selopt == 1) { 
      document.getElementById("f1").style.display = "block"; 
      document.getElementById("f2").style.display = "none"; 
     } 
     if (selopt == 2) { 
      document.getElementById("f2").style.display = "block"; 
      document.getElementById("f1").style.display = "none"; 
     } 
     if (selopt == 0) { 
      document.getElementById("f2").style.display = "none"; 
      document.getElementById("f1").style.display = "none"; 
     } 
    } 
</script> 

Answer 2

Jak to? Utworzono skrzypce JS. http://jsfiddle.net/wigster/MeTQQ/

Pobiera wartość rozwijanego okna, a następnie, jeśli pasuje do reguły, ustawia inne rozwijane okno, aby wyświetlić, jeśli nie, ukrywa to inne rozwijane okno.

Answer 3

Jeśli chcesz użyć jQuery, można użyć tej przypadek testowy: http://jsfiddle.net/exXmJ/

Ja widzę to istnieją dwa sposoby, aby przejść. Usuń listę rozwijaną i zamień ją na nową lub ukryj/pokaż dwa różne listy rozwijane. Aleksander przyjął drugą metodę, więc nie będę w to wchodził.