javascript - 动态下拉问题

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>