造型隐藏下拉菜单

Question

I've got Dynamic Dropdown that will show another two hidden dropdown when selected. 我有动态下拉 菜单，会在选中时显示另外两个隐藏的下拉列表 。 I'm using this dropdown on a form. 我在表单上使用此下拉列表。 Unfortunately, I do not know how to style the dropdown accordingly. 不幸的是，我不知道如何相应地设置下拉列表的样式。 I've tried css and html styling method but nothing happened. 我尝试过css和html样式方法但没有发生任何事情。 I've try to search online but to no avail. 我试着在网上搜索但无济于事。

This is what they looked like : 这就是他们的样子：

Not arranged and no space between each other. 没有安排，彼此之间没有空间。

I wanted them to be like this : 我希望他们是这样的：

Arranged in one straight line and have space between them. 直线排列，两者之间有空间。

This is my dropdown code : 这是我的下拉代码：

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

Answer 1

Table structure is not correct and please see the below updated code. 表结构不正确，请参阅以下更新的代码。 Find the JS Fiddle here: https://jsfiddle.net/ranjitsachin/v9zaLxqc/2/ 在这里找到JS小提琴： https ： //jsfiddle.net/ranjitsachin/v9zaLxqc/2/

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

造型隐藏下拉菜单

问题描述

1 个解决方案

解决方案1
3 已采纳 2017-02-23 06:48:45

造型隐藏下拉菜单

问题描述

1 个解决方案

解决方案1 3 已采纳 2017-02-23 06:48:45

解决方案1
3 已采纳 2017-02-23 06:48:45