2012-08-02 86 views
6

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

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

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

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

感謝您的幫助!

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

回答

6

您可以使用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> 
+0

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

+0

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

+0

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

3

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

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

+2

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

+0

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

1

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

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

+0

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