JavaScript：动态下拉菜单用于另一个隐藏的下拉菜单和其他选项

Question

I have a dropdown named Agency with 2 options : 我有一个名为Agency的下拉菜单，其中有2个选项：

SPM SPM
PPS PPS

If SPM are chosen, no dropdown will be appear. 如果选择了SPM，则不会显示任何下拉列表。 But if PPS are chosen, another 2 different dropdown named Department and Office will appear. 但是，如果选择了PPS，则会出现另外两个名为Department and Office的下拉菜单。 In Department , it will be another 3 options : 在Department中 ，这将是另外三个选项：

HQ HQ
Branch 科
Stall 摊子

If HQ are chosen, option null will be shown in Office dropdown. 如果选择了总部，则选项null将显示在Office下拉列表中。 But if Branch are chosen, Office dropdown will show option such as : 但是，如果选择“ 分支” ，则Office下拉列表将显示以下选项：

Floor 1 1楼
Floor 2 2楼

In the other side, if Stall are chosen, Office dropdown will show option such as : 另一方面，如果选择“ 停转” ，则“ Office”下拉列表将显示以下选项：

Floor 3 3楼
Floor 4 4楼

<!-- <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>

Answer 1

<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>

JavaScript：动态下拉菜单用于另一个隐藏的下拉菜单和其他选项

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-02-14 10:15:06

JavaScript：动态下拉菜单用于另一个隐藏的下拉菜单和其他选项

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-02-14 10:15:06

解决方案1
2 已采纳 2017-02-14 10:15:06