javascript - 使用 PHP 在数据库中发送依赖下拉列表的值

Question

我使用 JavaScript 制作了一个依赖下拉列表。我想将相关下拉列表的数据发送到数据库，但它没有发送。这是我的一段代码。有下拉“类别”，而从属下拉“子类别”取决于此。类别数据将进入数据库，但子类别不会。

类别代码

<div class="category_div" id="category_div">Please specify Category:
<select name="category" class="required-entry" id="category" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);" required>
<option value="">Select Category</option>
<option value="Animals & Pet Supplies">Animals & Pet Supplies</option>                                                           
<option value="Apparel & Accessories">Apparel & Accessories</option>                                                            
<option value="Arts & Entertainment">Arts & Entertainment</option>                                                            
<option value="Baby & Toddler">Baby & Toddler</option>                                                            
<option value="Business & Industrial">Business & Industrial</option>
</select>
</div>

子类别代码

<div class="sub_category_div" id="sub_category_div">Please select Subcategory:
<script type="text/javascript" language="JavaScript">
document.write('<select name="subcategory" id="subcategory"><option value="">Please select Subcategory</option></select>')
</script>
<noscript>
<select name="subcategory" id="subcategory" required>
<option value="">Please select Subcategory</option>
</select>
</noscript>
</div>

子类别的 JavaScript 代码

<script language="javascript" type="text/javascript">
function dynamicdropdown(listindex)
{
document.getElementById("subcategory").length = 0;
switch (listindex)
{
case "Animals & Pet Supplies" :
document.getElementById("subcategory").options[0]=new Option("Please select Subcategory","");
document.getElementById("subcategory").options[1]=new Option("Animal Food","Animal Food");
document.getElementById("subcategory").options[2]=new Option("Animal Accessories","Animal Accessories");
break;

case "Apparel & Accessories" :
document.getElementById("subcategory").options[0]=new Option("Please select Subcategory","");
document.getElementById("subcategory").options[1]=new Option("Clothing","Clothing");
document.getElementById("subcategory").options[2]=new Option("Clothing Accessories","Clothing Accessories");
break;

case "Arts & Entertainment" :
document.getElementById("subcategory").options[0]=new Option("Please select Subcategory","");
document.getElementById("subcategory").options[1]=new Option("Hobbies & Creative Arts","Hobbies & Creative Arts");
document.getElementById("subcategory").options[2]=new Option("Party & Celebration","Party & Celebration");

case "Baby & Toddler" :
document.getElementById("subcategory").options[0]=new Option("Please select Subcategory","");
document.getElementById("subcategory").options[1]=new Option("Baby Bathing & Body","Baby Bathing & Body");
document.getElementById("subcategory").options[2]=new Option("Baby Gift Sets","Baby Gift Sets");
document.getElementById("subcategory").options[3]=new Option("Baby Safety","Baby Safety");
document.getElementById("subcategory").options[4]=new Option("Baby Toys & Activity Equipment","Baby Toys & Activity Equipment");
document.getElementById("subcategory").options[5]=new Option("Baby Transport Accessories","Baby Transport Accessories");
document.getElementById("subcategory").options[6]=new Option("Diaperring","Diaperring");
document.getElementById("subcategory").options[7]=new Option("Nursing & Feeding","Nursing & Feeding");
break;

case "Business & Industrial" :
document.getElementById("subcategory").options[0]=new Option("Please select Subcategory","");
document.getElementById("subcategory").options[1]=new Option("Medical","Medical");
document.getElementById("subcategory").options[2]=new Option("Retail","Retail");
document.getElementById("subcategory").options[3]=new Option("Agriculture","Agriculture");
break;
}
return true;
}
</script>

我怎样才能做到这一点？

function dynamicdropdown(listindex){
    document.getElementById("subcategory").length = 0;
        switch (listindex){
            case "Animals & Pet Supplies" :
            document.getElementById("subcategory").options[0]=new Option("Please select Subcategory","");
            document.getElementById("subcategory").options[1]=new Option("Animal Food","Animal Food");
            document.getElementById("subcategory").options[2]=new Option("Animal Accessories","Animal Accessories");
        break;
        
        case "Apparel & Accessories" :
            document.getElementById("subcategory").options[0]=new Option("Please select Subcategory","");
            document.getElementById("subcategory").options[1]=new Option("Clothing","Clothing");
            document.getElementById("subcategory").options[2]=new Option("Clothing Accessories","Clothing Accessories");
        break;
        
        case "Arts & Entertainment" :
            document.getElementById("subcategory").options[0]=new Option("Please select Subcategory","");
            document.getElementById("subcategory").options[1]=new Option("Hobbies & Creative Arts","Hobbies & Creative Arts");
            document.getElementById("subcategory").options[2]=new Option("Party & Celebration","Party & Celebration");
        break;
        
        case "Baby & Toddler" :
            document.getElementById("subcategory").options[0]=new Option("Please select Subcategory","");
            document.getElementById("subcategory").options[1]=new Option("Baby Bathing & Body","Baby Bathing & Body");
            document.getElementById("subcategory").options[2]=new Option("Baby Gift Sets","Baby Gift Sets");
            document.getElementById("subcategory").options[3]=new Option("Baby Safety","Baby Safety");
            document.getElementById("subcategory").options[4]=new Option("Baby Toys & Activity Equipment","Baby Toys & Activity Equipment");
            document.getElementById("subcategory").options[5]=new Option("Baby Transport Accessories","Baby Transport Accessories");
            document.getElementById("subcategory").options[6]=new Option("Diaperring","Diaperring");
            document.getElementById("subcategory").options[7]=new Option("Nursing & Feeding","Nursing & Feeding");
        break;
        
        case "Business & Industrial" :
            document.getElementById("subcategory").options[0]=new Option("Please select Subcategory","");
            document.getElementById("subcategory").options[1]=new Option("Medical","Medical");
            document.getElementById("subcategory").options[2]=new Option("Retail","Retail");
            document.getElementById("subcategory").options[3]=new Option("Agriculture","Agriculture");
        break;
    }
    return true;
}

<div class="category_div" id="category_div">Please specify Category:
    <select name="category" class="required-entry" id="category" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);" required>
        <option value="">Select Category</option>
        <option value="Animals & Pet Supplies">Animals & Pet Supplies</option>                                                           
        <option value="Apparel & Accessories">Apparel & Accessories</option>                                                            
        <option value="Arts & Entertainment">Arts & Entertainment</option>                                                            
        <option value="Baby & Toddler">Baby & Toddler</option>                                                            
        <option value="Business & Industrial">Business & Industrial</option>
    </select>
</div>

<div class="sub_category_div" id="sub_category_div">Please select Subcategory:
    <script type="text/javascript" language="JavaScript">
        document.write('<select name="subcategory" id="subcategory"><option value="">Please select Subcategory</option></select>')
    </script>
    <noscript>
        <select name="subcategory" id="subcategory" required>
            <option value="">Please select Subcategory</option>
        </select>
    </noscript>
</div>

标签： javascriptphphtmlmysql