CODEWITHSUNDEEP
javascripthtmlcssdrop-down-menu
Far
Far

Reputation: 55

Styling Hidden Dropdown Menu

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. I've try to search online but to no avail.

This is what they looked like :

Not arranged and no space between each other.

here

I wanted them to be like this :

Arranged in one straight line and have space between them.

this

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>

Upvotes: 1

Views: 84

Answers (1)

Ranjit Kumar
Ranjit Kumar

Reputation: 273

Table structure is not correct and please see the below updated code. Find the JS Fiddle here: 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>

Upvotes: 3

Related Questions