形式：基於類別的子類別

我想使用兩個下拉選擇菜單製作一個表單：一個選擇類別，另一個選擇子類別。我試圖做到這一點，所以子類別選項是基於他們首先選擇的類別，我不知道從哪裏開始，谷歌搜索讓我空手而歸。謝謝！形式：基於類別的子類別

2012-06-14 Nathan

您需要使用JavaScript或jQuery庫來執行此操作。你可以從谷歌搜索開始，比如「javascript related dropdown」。 – j08691

這是你想要什麼：請注意，這只是使用HTML和純JavaScript。是的，你也可以使用JQuery。

<html> 
<head> 

<script language="javascript" type="text/javascript"> 
function dropdownlist(listindex) 
{ 

document.formname.subcategory.options.length = 0; 

switch (listindex) 
{ 
    case "category1" : 
     document.formname.subcategory.options[0]=new Option("subcategory1.1","value1.1"); 
     document.formname.subcategory.options[1]=new Option("subcategory1.2","value1.2"); 
     document.formname.subcategory.options[2]=new Option("subcategory1.3","value1.3"); 
     break; 

    case "category2" : 
     document.formname.subcategory.options[0]=new Option("subcategory2.1","value2.1"); 
     document.formname.subcategory.options[1]=new Option("subcategory2.2","value2.2"); 
     document.formname.subcategory.options[2]=new Option("subcategory2.3","value2.3"); 
     break; 

    case "category3" : 
     document.formname.subcategory.options[0]=new Option("subcategory3.1","value3.1"); 
     document.formname.subcategory.options[1]=new Option("subcategory3.2","value3.2"); 
     document.formname.subcategory.options[2]=new Option("subcategory3.3","value3.3"); 
     break; 

    default: 
     document.formname.subcategory.options[0]=new Option("Select Category") 
     break; 
} 
return true; 
} 
</script> 
</head> 

<title>Dynamic Drop Down List</title> 

<body> 

<form id="formname" name="formname" method="post" action="submitform.asp" > 
<table width="50%" border="0" cellspacing="0" cellpadding="5"> 
<tr> 
<td width="41%" align="right" valign="middle">Category :</td> 
<td width="59%" align="left" valign="middle"><select name="category" id="category" onchange="dropdownlist(this.options[this.selectedIndex].value);"> 
<option value="">Select Category</option> 
<option value="category1">category 1</option> 
<option value="category2">category 2</option> 
<option value="category3">category 3</option> 
</select></td> 
</tr> 
<tr> 
<td align="right" valign="middle">Sub Category : 
</td> 
<td align="left" valign="middle"><script type="text/javascript" language="JavaScript"> 
document.write('<select name="subcategory"><option value="">Select Sub-Category</option></select>') 
</script> 
<noscript><select name="subcategory" id="subcategory" > 
<option value="">Select Sub-Category</option> 
</select> 
</noscript></td> 
</tr> 
</table> 

</form> 


</body> 
</html>

來源

2012-06-14 17:20:18 Shiham

這是非常可怕的，從我有限的知識看起來不錯，讓我嘗試與它合作，並找出它，如果它的工作，我會接受這個答案，如果沒有，我會問爲了澄清。謝謝！ – Nathan

如果它對您有幫助，請將其標記爲答案。 – Shiham

快速提問，對於「case」category1「：」我應該將category1更改爲下拉選項中的值嗎？ – Nathan

搜索級聯下拉菜單。這將需要一些JavaScript或者一些服務器端的代碼，但這個搜索詞，你會發現噸...

，從這裏開始http://archive.plugins.jquery.com/plugin-tags/drop-down

來源

2012-06-14 17:13:03 silverfighter

我使用了谷歌級聯下拉菜單，並且發現了一些有趣的東西，但沒有解釋它們如何工作，比如教程等，你知道任何好的教程嗎？我特別試圖學習做的是說我有一個網站讓人們出售圖形，賣方可以點擊類別的cms模板和子類別選項是drupal，joomla等，但如果他們選擇網絡圖形，那麼它將是圖標，照片等... – Nathan

形式：基於類別的子類別

回答

相關問題