JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<UL class="dropdown">
  <LH>What's your favorite fruit?</LH>
  <LI>apples</LI>
  <LI>oranges</LI>
  <LI>bananas</LI>
  <LI>strawberries</LI>
  <LI>raspberries</LI>
  <LI>melons</LI>
  <LI>grapes</LI>
  <LI>tangerines</LI>
</UL>

JavaScript

jQuery(document).ready(function() {
  $('.dropdown').click(function() {
    
     var $list   = $(this),
     $select = $('<select />');

$list.children('li').each(function(index) {
  $select.append($('<option />').attr('value', index).html($(this).html()));
});

$list.replaceWith($select);


    
    
  });
});