形式：基于类别的子类别

我想使用两个下拉选择菜单制作一个表单：一个选择类别，另一个选择子类别。我试图做到这一点，所以子类别选项是基于他们首先选择的类别，我不知道从哪里开始，谷歌搜索让我空手而归。谢谢！形式：基于类别的子类别

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

形式：基于类别的子类别

回答

相关问题