造型隱藏下拉菜單

我有動態下拉菜單這將顯示另外兩個隱藏下拉菜單選中時。我在表單上使用此下拉菜單。不幸的是，我不知道如何設計相應的下拉菜單。我試過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

造型隱藏下拉菜單

回答

相關問題