堆棧內存溢出
  簡體   English   中英

JavaScript：動態下拉菜單用於另一個隱藏的下拉菜單和其他選項

[英]JavaScript : Dynamic Dropdown for Another Hidden Dropdown and Different Option

 原文  2017-02-14 03:23:56  8   1    javascript/ jquery/ html/ drop-down-menu

問題描述

我有一個名為Agency的下拉菜單，其中有2個選項：

  • SPM
  • PPS

如果選擇了SPM，則不會顯示任何下拉列表。 但是，如果選擇了PPS，則會出現另外兩個名為Department and Office的下拉菜單。 在Department中 ，這將是另外三個選項：

  • HQ
  • 科
  • 攤子


如果選擇了總部 ，則選項null將顯示在Office下拉列表中。 但是，如果選擇“ 分支” ，則Office下拉列表將顯示以下選項：

  • 1樓
  • 2樓

另一方面，如果選擇“ 停轉” ，則“ Office”下拉列表將顯示以下選項：

  • 3樓
  • 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>

1 個解決方案

解決方案1
 2 已采納  2017-02-14 10:15:06

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 禁用動態下拉選項值 onchange another dynamic dropdown JavaScript：根據另一個下拉列表從下拉列表中刪除不同的選項標簽？ 另一個下拉菜單的自動選擇下拉菜單選項 Javascript 下拉列表 - 根據同一下拉列表中的選定選項顯示不同的選項 如何通過使用javascript在另一個下拉菜單中進行選擇來禁用下拉菜單中的選項 如何在下拉菜單中有隱藏選項？ 從下拉列表中選擇選項時，Javascript顯示隱藏的div 基於另一個下拉列表的動態文本框和下拉列表-javascript 在更改另一個下拉選項時隱藏下拉選項 下拉選擇的選項在另一個下拉菜單中選擇選項
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM