How make to make dropdown without html select

Answer 1

USE <ul> <li>

Hi,

If you want add any HTML tags inside your item list. Best way is use <ul> <li> 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; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id='ddlDemoDropdown' class="list-unstyled" style="list-style: none;">
    <li class="init" data-value="-1">--SELECT--</li>
    
    <li data-value="value 1">Option 1</li>
    <li data-value="value 2">Here you can add any HTML tags like <input style='width:30px;' type='text' /> Textbox ... ;) </li>
    <li data-value="value 3">Option 3</li>
</ul>

EDIT:-

Check below click event and I also updated my snippet .. you can check now

$("body").on("click", "#ddlDemoDropdown li", function() {
        var selectedValue = $(this).attr('data-value')
        alert(selectedValue)
    });