Как бы я внедрить JQuery в мои существующие выпадающие списки

Question

Я хочу внедрить этот jquery в мой существующий выпадающий список.Тот, который я хочу интегрировать: https://codepen.io/Carike/pen/QyEQeN

Я поместил этот код в мой шаблон и он работает нормально.Но я просто хотел бы интегрироваться с моим собственным выпадающим списком.Как бы я это сделал?

Вот мой код:

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

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

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

  </select>
  </div>
 </div>

Вот фактический код, который я хочу интегрировать в свои функции с моими тегами.

<div>
 <ul class="dropdown">
  <li><a href="#">Kinda Tall Menu</a>
   <ul class="sub_menu">

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

   </ul>
</div>

По сути, мой код просто извлекает данные и перечисляет их на основе упомянутых там полей, таких как губернаторство.имя_ар.Он перечисляет все названия провинций в форме списка или раскрывающемся списке.Я просто хочу иметь такую ​​же функциональность в моих списках.

Заранее спасибо: D