Cách tạo menu thả xuống xuất hiện dựa trên câu trả lời từ trình đơn thả xuống khác

Question

Tôi đang cố gắng tạo trang nơi người dùng của bạn phải thực hiện nhiều lựa chọn dựa trên nhau. Làm cách nào để bạn tạo biểu mẫu sao cho một loại menu thả xuống cụ thể # 2 xuất hiện dựa trên lựa chọn của người dùng trong menu thả xuống # 1. Ví dụ:

Ví dụ: giả sử người dùng phải chọn "danh mục sản phẩm" và "danh mục phụ sản phẩm". Nếu người dùng chọn "bộ đồ giường" từ trình đơn thả xuống đầu tiên, menu thả xuống thứ hai sẽ tự động xuất hiện với các lựa chọn như "giường, nệm, gối".

Để tiếp tục ví dụ này, giả sử người dùng đã chọn "điện tử" thay vì "giường". Sau đó, menu thả xuống thứ hai sẽ có các lựa chọn như "tv, máy nghe nhạc mp3, máy tính".

Làm cách nào để thực hiện điều gì đó như vậy? Có điều gì đó bạn sẽ làm trong HTML/CSS hoặc một số biểu mẫu khác không?

Cảm ơn sự giúp đỡ!

EDIT - Tôi đang sử dụng Django/Python để xây dựng trang web này cùng với HTML, CSS và Javascript.

Answer 1

Bạn có thể sử dụng một sự kết hợp của HTML và 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

Giống như này? Đã tạo ra một js fiddle. http://jsfiddle.net/wigster/MeTQQ/

Nó lấy giá trị của hộp thả xuống, và sau đó nếu nó khớp với quy tắc, nó sẽ đặt hộp thả xuống khác để hiển thị, nếu không, hãy giữ hộp thả xuống kia ẩn.

Answer 3

Nếu bạn muốn sử dụng jQuery, bạn có thể sử dụng test này: http://jsfiddle.net/exXmJ/

Con đường tôi nhìn thấy nó có hai cách để đi. Xóa trình đơn thả xuống và trao đổi nó cho một trang mới hoặc ẩn/hiển thị hai trình đơn thả xuống khác nhau. Alexander bảo vệ phương pháp thứ hai để tôi không đi vào đó.