如何創建基於來自另一個下拉菜單的答案出現的下拉菜單

我正在嘗試創建一個頁面，您的用戶必須進行基於對方的多個選擇。如何創建一個表單，以便根據用戶在下拉菜單＃1中的選擇顯示特定類型的下拉菜單＃2。如何創建基於來自另一個下拉菜單的答案出現的下拉菜單

例如，可以說用戶必須選擇「產品類別」和「產品子類別」。如果用戶從第一個下拉菜單中選擇「牀上用品」，則會自動出現第二個下拉菜單，其中有諸如「牀，牀墊，枕頭」等選項。

爲了進一步說明這個例子，可以說用戶選擇「電子」而不是「牀上用品」。然後第二個下拉菜單將有「電視，MP3播放器，電腦」等選擇。

怎麼會這樣做呢？這是你會用HTML/CSS或其他形式做的事嗎？

感謝您的幫助！

編輯 - 我使用Django/Python構建這個網站以及HTML，CSS和Javascript。

來源

2012-08-02 goelv

您可以使用HTML和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>

來源

2012-08-02 23:35:44 amiregelz

完美！感謝您的幫助 – goelv 2012-08-02 23:36:49

您會如何使用外部CSS編寫上述內容？我知道如何在HTML中做到這一點，但在JS代碼中，它是否如所示的那樣離開它，還是它也稱爲樣式表？ – wordman 2013-10-24 22:40:17

@wordman我不確定你的意思，你能鏈接你的代碼嗎？ – amiregelz 2013-10-25 12:46:01

喜歡這個？創建了一個js小提琴。 http://jsfiddle.net/wigster/MeTQQ/

它抓取下拉框的值，然後如果它符合規則，它會設置另一個下拉框顯示，如果沒有，則保持其他下拉框隱藏。

來源

2012-08-02 23:36:14

不是一個不好的起點+1，但他可能可以使用更多的解釋。 – AlexMA 2012-08-02 23:46:34

爲輸入而歡呼 - 添加簡要說明 - 提高。 – 2012-08-02 23:49:00

如果你想使用jQuery，您可以使用此測試案例： http://jsfiddle.net/exXmJ/

我看到它的方式有兩種方式去。刪除下拉菜單並將其交換爲新的下拉菜單，或者隱藏/顯示兩個不同的下拉菜單。亞歷山大覆蓋了第二種方法，所以我不會進入。

來源

2012-08-02 23:42:28 thomasmyrman

注意：我不會完全按照亞歷山大的例子來使用，主要是因爲它使用內聯css。您應該將CSS放入樣式表中，以便從標記中分離出設計。實際的方法沒問題，雖然事件監聽器可能比onclick =「」屬性更好。 – thomasmyrman 2012-08-03 00:00:42

如何創建基於來自另一個下拉菜單的答案出現的下拉菜單

回答

相關問題