造型隐藏下拉菜单

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

来源

2017-02-23 Far

的向下箭头是Unicode或图像？如果有图片，请分享一下！ –

@Keerthana down arrow =选项。他们在每个下拉菜单 – Far

上获得了几个选项。好的。谢谢。 –

表结构不正确，请参阅下面的更新的代码。发现这里的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>

来源

2017-02-23 06:48:45

谢谢你的回答@RanjitSachin，但我如何在他们之间创造空间？我试过'
'但没有发生任何事情。 – Far

如果你需要下拉空间，那么你可以使用保证金。我已经使用过，你可以加以说明。或者你需要选择框中的空间。您可以使用填充，请参阅此处：https://jsfiddle.net/ranjitsachin/v9zaLxqc/3/ –

谢谢先生@RanjitKumar我会尝试将您的方法应用于我的。 – Far

造型隐藏下拉菜单

回答

相关问题