Question

我有动态下拉，会在选中时显示另外两个隐藏的下拉列表。我在表单上使用此下拉列表。不幸的是，我不知道如何相应地设置下拉列表的样式。我尝试过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>

Answer 1

表格结构不正确，请参阅以下更新的代码。在这里找到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 个答案: