JavaScript：另一个隐藏下拉菜单和不同选项的动态下拉菜单

我有一个名为“代理机构”的下拉列表，有两个选项：

• SPM
• PPS

如果选择SPM，则不会出现下拉列表。但如果选择PPS，将出现另两个不同的下拉列表，分别命名为部门和办公室。在部门中，将有另外3个选项：

• 总部
• 分支机构
• 失速

如果选择了HQ，则Office下拉列表中将显示空选项。但是如果选择了分支机构，则办公室下拉列表将显示如下选项：

• 一楼
• 二楼

在另一侧，如果选择了暂停，办公室下拉菜单将显示如下选项：

• 三楼
• 四楼

管理
$（文档）.ready（函数（）{
$（“#代理”）.变更（职能（）{
//删除myDiv中的所有下拉列表
$（'#myDiv'）.html（''）；
//创建新的下拉菜单
var whereToPut1=document.getElementById（'myDiv'）；//部门下拉列表
var newDropdown1=document.createElement（'select'）；
setAttribute（'id'，“newDropdownMenu”）；
其中1.appendChild（新建下拉列表1）；
//在myDiv中为另一个下拉菜单创建另一个div
var innerDropdowndiv=document.createElement（'div'）；
setAttribute（'id'，“innerDropdowndiv”）；
其中1.appendChild（innerDropdowndiv）；
var whereToPut2=document.getElementById（'innerdropdowndiv'）；
//创建另一个下拉菜单
var newDropdown2=document.createElement（'select'）；//Office下拉列表
setAttribute（'id'，“innerDropdownMenu”）；
whereToPut2.appendChild（newDropdown2）；
如果（$（“#代理”）.find（“：selected”）.text（）=“PPS”）{
$（'#newDropdownMenu'）。追加（'Department'）//显示Department下拉列表
$（'newDropdownMenu'）。追加（'Office'）//Office下拉列表将显示在部门下方
$（'#innerDropdownMenu'）。追加（'HQ'）
$（“#innerDropdownMenu”）.append（'Branch'）
$（“#innerDropdownMenu”）.append（'Stall'）
$（“#新建下拉菜单”）.change（函数（）{
if（$（'newDropdownMenu'）.find（“：selected”）.text（）=“Department”）
{
$（'#innerdropdowndiv'）.html（''）；
$（'#innerdropdowndiv'）。追加（$（''）.attr（'id'，'innerDropdownMenu'））
$（'#innerDropdownMenu'）。追加（'HQ'）
$（“#innerDropdownMenu”）.append（'Branch'）
$（“#innerDropdownMenu”）.append（'Stall'）
}
else if（$（'newDropdownMenu'）.find（“：selected”）.text（）=“Office”和&$（'innerDropdownMenu'）.find（“：selected”）.text（）=“Branch”）
{
$（'#innerdropdowndiv'）.html（''）；
$（'#innerdropdowndiv'）。追加（$（''）.attr（'id'，'innerDropdownMenu'））
$（“#innerDropdownMenu”）.append（'Floor1'）
$（'#innerDropdownMenu'）。追加（'Floor2'）
}
else if（$（'newDropdownMenu'）.find（“：selected”）.text（）=“Office”和&$（'innerDropdownMenu'）.find（“：selected”）.text（）=“Stall”）
{
$（'#innerdropdowndiv'）.html（''）；
$（'#innerdropdowndiv'）。追加（$（''）.attr（'id'，'innerDropdownMenu'））
$（“#innerDropdownMenu”）.append（'Floor3'）
$（“#innerDropdownMenu”）.append（'Floor4'）
}
否则{
{
$（'#innerdropdowndiv'）.html（''）；
}
}
})
}
否则{
$（'#myDiv'）.html（''）；
}
});
});
代理机构*

$（文档）.ready（函数（）{
$（“#代理”）.变更（职能（）{
//删除myDiv中的所有下拉列表
$（'#myDiv'）.html（''）；
//创建新的下拉菜单
var whereToPut1=document.getElementById（'myDiv'）；
var newDropdown1=document.createElement（'select'）；
setAttribute（'id'，“newDropdownMenu”）；
其中1.appendChild（新建下拉列表1）；
//在myDiv中为另一个下拉菜单创建另一个div
var innerDropdowndiv=document.createElement（'div'）；
setAttribute（'id'，“innerDropdowndiv”）；
其中1.appendChild（innerDropdowndiv）；
var whereToPut2=document.getElementById（'innerdropdowndiv'）；
//创建另一个下拉菜单
var newDropdown2=document.createElement（'select'）；
setAttribute（'id'，“innerDropdownMenu”）；
whereToPut2.appendChild（newDropdown2）；
如果（$（“#代理”）.find（“：selected”）.text（）=“PPS”）{
$（“#新建下拉菜单”）.append（'Department'）
$（'newDropdownMenu'）。追加（'Office'）
$（'#innerDropdownMenu'）。追加（'HQ'）
$（“#innerDropdownMenu”）.append（'Branch'）
$（“#innerDropdownMenu”）.append（'Stall'）
$（“#新建下拉菜单”）.change（函数（）{
if（$（'newDropdownMenu'）.find（“：selected”）.text（）=“Department”）
{
$（'#innerdropdowndiv'）.html（''）；
$（'#innerdropdowndiv'）。追加（$（''）.attr（'id'，'innerDropdownMenu'））
$（'#innerDropdownMenu'）。追加（'HQ'）
$（“#innerDropdownMenu”）.append（'Branch'）
$（“#innerDropdownMenu”）.append（'Stall'）
}
else if（$（'newDropdownMenu'）.find（“：selected”）.text（）=“Office”和&$（'innerDropdownMenu'）.find（“：selected”）.text（）=“Branch”）
{
$（'#innerdropdowndiv'）.html（''）；
$（'#innerdropdowndiv'）。追加（$（''）.attr（'id'，'innerDropdownMenu'））
$（“#innerDropdownMenu”）.append（'Floor1'）
$（“#内部下拉菜单”）.a
<!-- <script>
var created = 0;

        function displayAccordingly() {

            if (created == 1) {
                removeDrop();
            }

            //Call Agency the main dropdown menu
            var Agency = document.getElementById('Agency');

            //Create the new dropdown menu
            var whereToPut = document.getElementById('myDiv');
            var newDropdown = document.createElement('select');
            newDropdown.setAttribute('id',"newDropdownMenu");
            whereToPut.appendChild(newDropdown);

            if (Agency.value == "PPS") {

                    var optionD=document.createElement("option");
                optionD.text="Department";
                newDropdown.add(optionD,newDropdown.options[null]);

                var optionOffice=document.createElement("option");
                optionOffice.text="Office";
                newDropdown.add(optionOffice,newDropdown.options[null]);

            } else if (Agency.value == "SPM") { 

                removeDrop('myDiv').hide();
            }

            created = 1

            }

            function removeDrop() {
            var d = document.getElementById('myDiv');
            var oldmenu = document.getElementById('newDropdownMenu');
            d.removeChild(oldmenu);
        }

</script>
 -->

<!DOCTYPE html>
<html>
<head>
<title>Administration</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  


<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#Agency").change(function(){

//To remove all the dropdown in myDiv
$('#myDiv').html('');

//Create the new dropdown menu
var whereToPut1 = document.getElementById('myDiv');//Department dropdown
var newDropdown1 = document.createElement('select');
newDropdown1.setAttribute('id',"newDropdownMenu");
whereToPut1.appendChild(newDropdown1);

//Create another div inside myDiv for another dropdown menu
var innerDropdowndiv = document.createElement('div');
innerDropdowndiv.setAttribute('id',"innerdropdowndiv");
whereToPut1.appendChild(innerDropdowndiv);
var whereToPut2 = document.getElementById('innerdropdowndiv');

//Create another dropdown menu
var newDropdown2 = document.createElement('select');//Office dropdown
newDropdown2.setAttribute('id',"innerDropdownMenu");
whereToPut2.appendChild(newDropdown2);

if ($('#Agency').find(":selected").text() == "PPS") {
                $('#newDropdownMenu').append('<option id="Department">Department</option>')//Department dropdown appear
                $('#newDropdownMenu').append('<option>Office</option>')//Office dropdown will appear below Department
                $('#innerDropdownMenu').append('<option>HQ</option>')
                $('#innerDropdownMenu').append('<option>Branch</option>')
                $('#innerDropdownMenu').append('<option>Stall</option>')

                $("#newDropdownMenu").change(function(){
                    if($('#newDropdownMenu').find(":selected").text() == "Department")
                    {
                      $('#innerdropdowndiv').html('');
                      $('#innerdropdowndiv').append($('<select>').attr('id','innerDropdownMenu'))
                      $('#innerDropdownMenu').append('<option>HQ</option>')
                      $('#innerDropdownMenu').append('<option>Branch</option>')
                      $('#innerDropdownMenu').append('<option>Stall</option>')
                    }
                    else if($('#newDropdownMenu').find(":selected").text() == "Office" && $('#innerDropdownMenu').find(":selected").text()=="Branch")
                    {
                      $('#innerdropdowndiv').html('');
                      $('#innerdropdowndiv').append($('<select>').attr('id','innerDropdownMenu'))
                      $('#innerDropdownMenu').append('<option>Floor1</option>')
                      $('#innerDropdownMenu').append('<option>Floor2</option>')
                    }
                    else if($('#newDropdownMenu').find(":selected").text() == "Office" && $('#innerDropdownMenu').find(":selected").text()=="Stall")
                    {
                      $('#innerdropdowndiv').html('');
                      $('#innerdropdowndiv').append($('<select>').attr('id','innerDropdownMenu'))
                      $('#innerDropdownMenu').append('<option>Floor3</option>')
                      $('#innerDropdownMenu').append('<option>Floor4</option>')
                    }
                    else {
                      {
                        $('#innerdropdowndiv').html('');
                      }
                    }
                })
              }
else {
      $('#myDiv').html('');
}
});
});

</script>
</head>
<body>
<td class = "Agency">Agency<span class="required">&nbsp; * &nbsp;&nbsp;&nbsp;</span></td>
     <td><select id="Agency"">
        <option value="Choose">Choose</option>
        <option value="SPM">SPM</option>
        <option value="PPS">PPS</option>
        </select>
        <h></h>
        </td>
         <tr>
      <td></td>
     <td>
        <div id="myDiv"></div>
       </td>
     </tr>
     <td>
        <div id="innerdropdowndiv"></div>
       </td>
     </tr>
    </body>
     </html>

<script>
$(document).ready(function(){
$("#Agency").change(function(){

//To remove all the dropdown in myDiv
$('#myDiv').html('');

//Create the new dropdown menu
var whereToPut1 = document.getElementById('myDiv');
var newDropdown1 = document.createElement('select');
newDropdown1.setAttribute('id',"newDropdownMenu");
whereToPut1.appendChild(newDropdown1);

//Create another div inside myDiv for another dropdown menu
var innerDropdowndiv = document.createElement('div');
innerDropdowndiv.setAttribute('id',"innerdropdowndiv");
whereToPut1.appendChild(innerDropdowndiv);
var whereToPut2 = document.getElementById('innerdropdowndiv');

//Create another dropdown menu
var newDropdown2 = document.createElement('select');
newDropdown2.setAttribute('id',"innerDropdownMenu");
whereToPut2.appendChild(newDropdown2);

if ($('#Agency').find(":selected").text() == "PPS") {
                $('#newDropdownMenu').append('<option id="Dep">Department</option>')
                $('#newDropdownMenu').append('<option>Office</option>')
                $('#innerDropdownMenu').append('<option>HQ</option>')
                $('#innerDropdownMenu').append('<option>Branch</option>')
                $('#innerDropdownMenu').append('<option>Stall</option>')

                $("#newDropdownMenu").change(function(){
                    if($('#newDropdownMenu').find(":selected").text() == "Department")
                    {
                      $('#innerdropdowndiv').html('');
                      $('#innerdropdowndiv').append($('<select>').attr('id','innerDropdownMenu'))
                      $('#innerDropdownMenu').append('<option>HQ</option>')
                      $('#innerDropdownMenu').append('<option>Branch</option>')
                      $('#innerDropdownMenu').append('<option>Stall</option>')
                    }
                    else if($('#newDropdownMenu').find(":selected").text() == "Office" && $('#innerDropdownMenu').find(":selected").text()=="Branch")
                    {
                      $('#innerdropdowndiv').html('');
                      $('#innerdropdowndiv').append($('<select>').attr('id','innerDropdownMenu'))
                      $('#innerDropdownMenu').append('<option>Floor1</option>')
                      $('#innerDropdownMenu').append('<option>Floor2</option>')
                    }
                    else if($('#newDropdownMenu').find(":selected").text() == "Office" && $('#innerDropdownMenu').find(":selected").text()=="Stall")
                    {
                      $('#innerdropdowndiv').html('');
                      $('#innerdropdowndiv').append($('<select>').attr('id','innerDropdownMenu'))
                      $('#innerDropdownMenu').append('<option>Floor3</option>')
                      $('#innerDropdownMenu').append('<option>Floor4</option>')
                    }
                    else {
                      {
                        $('#innerdropdowndiv').html('');
                      }
                    }
                })
              }
else {
      $('#myDiv').html('');
}
});
});
</script>