Javascript 隐藏样式下拉菜单_Javascript_Html_Css_Drop Down Menu

Javascript 隐藏样式下拉菜单

javascript html css drop-down-menu

Javascript 隐藏样式下拉菜单,javascript,html,css,drop-down-menu,Javascript,Html,Css,Drop Down Menu,我有一个动态下拉列表，选中后将显示另外两个隐藏的下拉列表。我在表单上使用这个下拉列表。不幸的是，我不知道如何设计相应的下拉列表。我尝试了css和html样式化方法，但什么也没发生。我试着在网上搜索，但没用这就是他们的样子：没有安排，彼此之间没有空间我希望他们是这样的：排列成一条直线，并在它们之间留有空间这是我的下拉代码： <!DOCTYPE html> <html> <head> <title>Administration</t

我有一个动态下拉列表，选中后将显示另外两个隐藏的下拉列表。我在表单上使用这个下拉列表。不幸的是，我不知道如何设计相应的下拉列表。我尝试了css和html样式化方法，但什么也没发生。我试着在网上搜索，但没用

这就是他们的样子：

没有安排，彼此之间没有空间

我希望他们是这样的：

排列成一条直线，并在它们之间留有空间

这是我的下拉代码：

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

<script type="text/javascript" src='https://code.jquery.com/jquery-3.1.1.min.js'> </script>
<script 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>
     <tr><td><select id="Agency"">
        <option value="Choose">Choose</option>
        <option value="SPM">SPM</option>
        <option value="PPS">PPS</option>
        </select>
        <h></h>
        </td>
         <td>
        <div id="myDiv"></div>
        </td>

        <td><div id="innerdropdowndiv"></div></td>
     </tr>
    </body>
     </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'）；//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（''）；
}
});
});
代理机构*
表结构不正确，请参阅下面的更新代码。在这里找到JS小提琴：




代理机构*
选择
SPM
PPS

向下箭头是unicode还是图像？如果是图片，请与大家分享@保持向下箭头=选项。他们在每个下拉菜单上都有几个选项—默认选项。好吧谢谢。谢谢你的回答@RanjitSachin，但是我如何在他们之间创造空间呢？我尝试了
，但什么也没发生。如果下拉列表之间需要空格，那么可以使用边距。我已经用过了，你可以放心。或者您需要在选择框中留出空间。你可以使用填充，请看这里：谢谢你，先生@RanjitKumar，我会尝试将你的方法应用到我的方法上。我需要你的帮助，找出如何添加隐藏下拉列表的标签@Ranjitkumary建议只保留html格式的选择框和标签，并根据你的要求显示/隐藏这些选择框和标签，我将很快添加jsfiddle。
<script type="text/javascript" src='https://code.jquery.com/jquery-3.1.1.min.js'>

<table>
<tr>
<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>
</td>
</tr>
<tr>
<td></td>
<td>
  <div id='myDiv'>
  </div>
</td>
<tr>
  <td>
  </td>
  <td>
    <div id="innerdropdowndiv"></div>
  </td>
</tr>