How make to make dropdown without html select

Answer 1

USE

Hi,

If you want add any HTML tags inside your item list. Best way is use

• with combination of css and some Jquery tricks to display as Dropdown

  Try below sample code

  $("ul").on("click", ".init", function() {
      $(this).closest("ul").children('li:not(.init)').toggle();
  });
  
  var allOptions = $("ul").children('li:not(.init)');
  $("ul").on("click", "li:not(.init)", function() {
      allOptions.removeClass('selected');
      $(this).addClass('selected');
      $("ul").children('.init').html($(this).html());
      allOptions.toggle();
  });
  // Check this click evnet - 
  $("body").on("click", "#ddlDemoDropdown li", function() {
      var selectedValue = $(this).attr('data-value')
      alert(selectedValue)
  });

  body{
    padding:30px;
  }
  ul { 
      height: 30px;
      width: 150px;
      border: 1px #000 solid;
  }
  ul li { padding: 5px 10px; z-index: 2; }
  ul li:not(.init) { float: left; width: 130px; display: none; background: #ffffd; }
  ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
  li.init { cursor: pointer; }
  
  a#submit { z-index: 1; }

  
  
      
  --SELECT--
      
      
  Option 1
      
  Here you can add any HTML tags like