CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapdrop-down-menu
Gabriel Augusto
Gabriel Augusto

Reputation: 29

How to insert dropdown item with JavaScript?

I have two Dropdown Menus on my page:

<div class="container">

<div class="row">

    <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
    <div class="col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10 col-xxl-10">
    
    Category:
    
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Select the Category
        </button>
        <ul class="dropdown-menu col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12" aria-labelledby="dropdownMenuButton1">
        <li><a class="dropdown-item" href="#">Sales</a></li>
        <li><a class="dropdown-item" href="#">Purchases</a></li>
        <li><a class="dropdown-item" href="#">Registrations</a></li>
        <li><a class="dropdown-item" href="#">Notes</a></li>
        <li><a class="dropdown-item" href="#">Bills</a></li>
        </ul>
        
    </div>
    
    </div>
    <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
    
</div>

<div class="row">

    <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
    <div class="col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10 col-xxl-10">
    
    <br/>
    
    Specification:
    
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Specify Category
        </button>
        <ul class="dropdown-menu col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12" aria-labelledby="dropdownMenuButton1">
        <li><a class="dropdown-item" href="#">Option 01</a></li>
        <li><a class="dropdown-item" href="#">Option 02</a></li>
        <li><a class="dropdown-item" href="#">Option 03</a></li>
        </ul>
        
    </div>
    
    <br/>
    
    </div>
    <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
    
</div>

</div>

enter image description here

I need that, according to the option that the user selects in the first Dropdown Menu, changes be made to the second Dropdown Menu, setting the Menu options (li). For example, if the user clicks on “Sales” in the first Dropdown Menu, I want the options “Forward Sales” to be inserted in the second Dropdown Menu || “Sight Sales” || “Latest Sales” || "Last Month Sales". How can I do this dynamic navigation so that the second Dropdown Menu is changed according to the selection made in the first Dropdown Menu?

Upvotes: 0

Views: 148

Answers (1)

user16716458
user16716458

Reputation:

You can do the code like this

  • First write the all the code of first drop-down and add an onclick event to each option .
  • So now whenever an option is clicked then an onclick event is triggered
  • Now made all write drop-down code which you want to trigger like when Sales or Purchases is clicked , a drop-down is displayed which you want to show for every option in first drop-down
    ( add display:none property so that they are hidden by default and trigger on click from first drop-down )

Now Java Script comes in handy

  • When a user click any option from first drop-down an function is executed like this :
    <li><a class="dropdown-item" href="#" onclick="open3DD()">Option 03</a></li>

JS :

function open3DD{
 document.getElementById("Drop-DownFor1rdOption").style.display = "none"
 document.getElementById("Drop-DownFor2rdOption").style.display = "none"
 document.getElementById("Drop-DownFor3rdOption").style.display = "block"
 document.getElementById("Drop-DownFor4rdOption").style.display = "none"
}

write this code like this for all other options or you can use if-elseif loop to loop through but in that also you have to write same code to hide/show the drop-down

Upvotes: 1

Related Questions