动态下拉问题

Question

我想在此链接Dynamic Drop Down

上创建一个动态下拉列表

但是对于我的结果我得到了这个代码，但有些错误??? 没有任何反应它在控制台中保持空白没有错误或任何东西???

Html代码

<div id="Dropdown_box">
    <p style="background-color:#456;margin-top:-10px;margin-left:10px;display:inline-block;padding:10px;">Please Select The DropDown Options</p> 
    <p></p>

    <div id="DropDown_List_Main" name="DropDown_List_Main">
    <select Id="DropDown_List_Main" onchange="javascript: dropdown_1(this.options[this.selectedIndex].value);">
        <option value="">Please Select</option>
        <option value="Visitor">Visitor</option>
        <option value="Customer">Customer</option>
        <option value="Company">Company</option>
        <option value="Supplier">Supplier</option>
    </select>
</div>

<div id="DropDown_List_Main" name="DropDown_List_Main">
    <script type="text/Javascript" language="Javascript">
document.write('<select name="DropDown_List" id="DropDown_List" ><option value="">Please Select</option></select>')
    </script>
    <noscript>
        <p>Please Enable Javascript</p>
    </noscript>
</div>

Javascript代码

function DropDown_1(listindex) {
    document.getElementById('DropDown_List').length = 0;
    switch(listindex){
        case "Visitor":
            document.getElementById("DropDown_List").options[0]=new Option("Please Select","");
            document.getElementById("DropDown_List").options[1]=new Option("Question","Question");
            document.getElementById("DropDown_List").options[2]=new Option("Compliment","Compliment");
            document.getElementById("DropDown_List").options[3]=new Option("Request","Request");
            break;

        case "Customer":
            document.getElementById("DropDown_List").options[0]=new Option("Please Select","");
            document.getElementById("DropDown_List").options[1]=new Option("Question","Question");
            document.getElementById("DropDown_List").options[2]=new Option("Request","Request");
            document.getElementById("DropDown_List").options[3]=new Option("Reciept","Reciept");
            document.getElementById("DropDown_List").options[4]=new Option("Complaint","Complaint");
            document.getElementById("DropDown_List").options[5]=new Option("Compliment","Compliment");
            break;

        case "Company":
           document.getElementById("DropDown_List").options[0]=new Option("Please Select","");
           document.getElementById("DropDown_List").options[1]=new Option("Request","Request");
           document.getElementById("DropDown_List").options[2]=new Option("Reciept","Reciept");
           document.getElementById("DropDown_List").options[3]=new Option("Complaint","Complaint");
           document.getElementById("DropDown_List").options[4]=new Option("Compliment","Compliment");
           document.getElementById("DropDown_List").options[5]=new Option("Delivery","Delivery");
           break;

        case "Supplier":
            document.getElementById("DropDown_List").options[0]=new Option("Please Select","");
            document.getElementById("DropDown_List").options[1]=new Option("Request","Request");
            document.getElementById("DropDown_List").options[2]=new Option("Reciept","Reciept");
            document.getElementById("DropDown_List").options[3]=new Option("Complaint","Complaint");
            document.getElementById("DropDown_List").options[4]=new Option("Compliment","Compliment");
            document.getElementById("DropDown_List").options[5]=new Option("Delivery","Delivery");
            break;
    }
    return true;
}

请大家帮忙会很棒！ 请不要把我推荐给JQuery是新的或者或多或少是javascript的新手 我尝试使用除了javascript以外的任何东西，但只有PHP和mysql数据库方法obv这是表单的一部分，第二个下拉列表需要代码取消隐藏或创建对应第一个下拉列表的字段中的填充。

任何有关这方面的帮助也会很棒，否则我可以使用除JQuery以外的任何其他编程吗？

Answer 1

实际上问题是功能名称。 Javascript 区分大小写。正如您在onchange中提到的那样，它应该是dropdown_1。

function dropdown_1(listindex) {
    document.getElementById('DropDown_List').length = 0;
switch(listindex){
    case "Visitor":
document.getElementById("DropDown_List").options[0]=new Option("Please Select","");
document.getElementById("DropDown_List").options[1]=new Option("Question","Question");
document.getElementById("DropDown_List").options[2]=new Option("Compliment","Compliment");
document.getElementById("DropDown_List").options[3]=new Option("Request","Request");
break;

    case "Customer":
document.getElementById("DropDown_List").options[0]=new Option("Please Select","");
document.getElementById("DropDown_List").options[1]=new Option("Question","Question");
document.getElementById("DropDown_List").options[2]=new Option("Request","Request");
document.getElementById("DropDown_List").options[3]=new Option("Reciept","Reciept");
document.getElementById("DropDown_List").options[4]=new Option("Complaint","Complaint");
document.getElementById("DropDown_List").options[5]=new Option("Compliment","Compliment");
break;

case "Company":
document.getElementById("DropDown_List").options[0]=new Option("Please Select","");
document.getElementById("DropDown_List").options[1]=new Option("Request","Request");
document.getElementById("DropDown_List").options[2]=new Option("Reciept","Reciept");
document.getElementById("DropDown_List").options[3]=new Option("Complaint","Complaint");
document.getElementById("DropDown_List").options[4]=new Option("Compliment","Compliment");
document.getElementById("DropDown_List").options[5]=new Option("Delivery","Delivery");
break;

case "Supplier":
document.getElementById("DropDown_List").options[0]=new Option("Please Select","");
document.getElementById("DropDown_List").options[1]=new Option("Request","Request");
document.getElementById("DropDown_List").options[2]=new Option("Reciept","Reciept");
document.getElementById("DropDown_List").options[3]=new Option("Complaint","Complaint");
document.getElementById("DropDown_List").options[4]=new Option("Compliment","Compliment");
document.getElementById("DropDown_List").options[5]=new Option("Delivery","Delivery");
break;

}

document.getElementById('DropDown_List').style.display='';
return true;
}

 <div id="Dropdown_box">
<p style="background-color:#456;margin-top:-10px;margin-left:10px;display:inline-block;padding:10px;">Please Select The DropDown Options</p> 
<p></p>

<div id="DropDown_List_Main" name="DropDown_List_Main">
<select Id="DropDown_List_Main" onchange="javascript: dropdown_1(this.options[this.selectedIndex].value);">
    <option value="">Please Select</option>
    <option value="Visitor">Visitor</option>
    <option value="Customer">Customer</option>
    <option value="Company">Company</option>
    <option value="Supplier">Supplier</option>
</select>
</div>

<div id="DropDown_List_Main" name="DropDown_List_Main">
<script type="text/Javascript" language="Javascript">
document.write('<select name="DropDown_List" id="DropDown_List" style="display:none;"><option value="">Please Select</option></select>')
</script>
<noscript>
<p>Please Enable Javascript</p>
</noscript>
</div>