Question

我想显示一个下拉列表（name＆＃34; sub_category）项依赖于另一个下拉列表（problem_type）项。

问题类型：在问题类型中选择一个：行问题，服务问题，
设备问题和计费问题。

子类别：

线路问题 - 噪音线路，呼叫干扰，线路损坏。

服务问题 - 提供商的主要服务中断。

设备问题 - 噪音大，没有拨号音，设备损坏。

结算问题 - 结算付款未更新，错误结算。

这是我的代码

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    <script type="text/javascript">
        window.onload = function addList(){
            int i;
            var sub = document.forms["raiseNewFault2"]["sub_category"];
            var main = document.forms["raiseNewFault2"]["problem_type"].value;
            var str1 = new Array("Noisy Line", "Call Interference", "Line damage");
            var str2 = new Array("Major service outage at Provider");
            var str3 = new Array("Noisy", "No Dial Tone", "Damaged Equipment");
            var str4 = new Array("Billing paid not updated", "Wrong Billing");
            if(main.equals("Line issue")){
                for(i=0;i<=2;i++){
                    var option = document.createElement('option');
                    option.text = option.value = str1[i];
                }
            }
            else if(main.equals("Service issue")){
                for(i=0;i<=0;i++){
                    var option = document.createElement('option');
                    option.text = option.value = str2[i];
                }
            }
            else if(main.equals("Equipment issue")){
                for(i=0;i<=2;i++){
                    var option = document.createElement('option');
                    option.text = option.value = str3[i];
                }
            }
            else if(main.equals("Billing issue")){
                for(i=0;i<=1;i++){
                    var option = document.createElement('option');
                    option.text = option.value = str4[i];
                }
            }
            select.add(option);
        }
    </script>
    <style type="text/css">
        #raiseNewFault2Div
        {
            margin-top : 25px;
            margin-left : 325px;
            height : 500px;
            width : 600px;
            background-color : #FFDA91;
            border : ridge;
            border-width : "3px"
        }
    </style>
</head>
<body onload="addList()">
    <div id="raiseNewFault2Div">
        <center>
            <form name="raiseNewFault2" action="Controller" method="post">

                <br/><br/>
                <font size="3" color="#006E25">Problem type &nbsp;&nbsp; :   
                 &nbsp;&nbsp; </font>
                <select name="problem_type">
                    <option value="Line issue" selected>Line issue</option>
                    <option value="Service issue">Service issue</option>
                    <option value="Equipment issue">Equipment issue</option>
                    <option value="Billing issue">Billing issue</option>
                </select>
               <br/><br/><font size="3" color="#006E25">Sub Category &nbsp;&nbsp; :   
                &nbsp;&nbsp; </font>
                <select name="sub_category"></select>
                </from></center> </div></body></html>

Answer 1

最简单的方法是检查用户在第一个列表中选择了什么，然后使用javascript相应地替换整个第二个列表： -
document.getElementById("put the id of the div which contains the list here").innerHTML="put the list you want to replace with the old one here";

Answer 2

我可以简单地用代码回答，但这个网站不适合它。

您可能需要查看此内容：Populate one dropdown list based on the selection of other dropdown list

希望有所帮助。

显示下拉列表项依赖于使用javascript的另一个下拉列表项

2 个答案: