How would I implement jquery into my existing dropdown listings

manpreet Best Answer 2 years ago

I want to implement this jquery into my existing dropdown list. The one I want to intergrate is https://codepen.io/Carike/pen/QyEQeN

Ive placed this code into my template and its working fine. But I just would want to integrate with my own dropdown. How would I do that?

Here's my Code:

<div class="col-12 col-md-4 col-lg-3">
 <div class="form-group">
   class="form-control" id="governorate" name="governorate">

    selected="true" disabled="disabled">{% trans 'Governorate' %}

    value="{{ governorate.name_ar }}"  data-governorate="{{governorate.id}}">{{ governorate.name_ar }}

  
  div>
 div>

Here's the actual code I want to integrate its functionalities with my tags.

<div>
  class="dropdown">
  
 href="#">Kinda Tall Menu
    class="sub_menu">

    
 href="#">Artificial Turf
    
 href="#">Benches &amp; Bleachers
    
 href="#">Communication Devices
    
 href="#">Dugouts
    
 href="#">Fencing &amp; Windscreen
    
 href="#">Floor Protectors
    
 href="#">Foul Poles
    
 href="#">Netting
    
 href="#">Outdoor Furniture &amp; Storage

   
div>

Basically, my code is just retreiving the data and listing them on the basis of the feilds mentioned there such as governorate.name_ar. It is listing all the governorate names in a listing form or dropdown. I just want to have the same functionality into my listings.

Thank you in advance :D