0

2 つのドロップダウン選択メニューを使用してフォームを作成しようとしています。1 つはカテゴリを選択し、もう 1 つはサブカテゴリを選択します。サブカテゴリのオプションが最初に選択したカテゴリに基づいているようにしようとしています。これをどこから始めればよいかわかりません。Google検索では手ぶらで残されています。ありがとう！

4

2 に答える 2

1

カスケードドロップダウンを検索します。これにはJavaScriptまたはサーバー側のコードが必要ですが、この検索用語を使用すると、大量のコードが見つかります...

そして、ここから開始しますhttp://archive.plugins.jquery.com/plugin-tags/drop-down

于 2012-06-14T17:13:03.073 に答える
1

これはあなたが望むものです：これは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-14T17:20:18.613 に答える