Стилирование скрытого раскрывающегося меню

У меня есть Динамическое выпадение, которое покажет еще два скрытых выпадающего списка при выборе. Я использую это раскрывающееся меню в форме. К сожалению, я не знаю, как правильно выстроить выпадающий список. Я пробовал метод css и html styling, но ничего не произошло. Я пытаюсь искать в Интернете, но безрезультатно.Стилирование скрытого раскрывающегося меню

Это то, что они выглядели как:

не устроило и без зазора между друг другом.

Я хотел, чтобы они, как это:

Расположены в одной прямой и есть пространство между ними.

Это мой выпадающий код:

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

Стрелка вниз является юникода или изображение? Если изображение, пожалуйста, используйте то же самое! –

@ Keerthana the 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

Стилирование скрытого раскрывающегося меню

ответ

Смежные вопросы