USE < ul> < li>

您好，

如果您想添加任何 HTML 项目列表中的标签。***的方法是使用< ul> < li> 并结合 css 和一些 Jquery 技巧显示为Dropdown

尝试下面的示例代码

  $（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（）;}）; //检查此单击evnet  -  $（ body）。on（click，＃ddlDemoDropdown li，function（）{var selectedValue = $（this）.attr（'data-value'）alert（selectedValue）}）;  

  body {padding：30px;} ul {height：30px;宽度：150px; border：1px＃000 solid;} ul li {padding：5px 10px; z-index：2; } ul li：not（.init）{float：left;宽度：130px; display：none;背景：#ddd; } ul li：not（.init）：hover，ul li.selected：not（.init）{background：＃09f; } li.init {cursor：pointer; ＃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-unstyledstyle =list-style：无;&GT; < li class =initdata-value = -  1>  -  SELECT  - < / li> < li data-value =value 1>选项1< / li> < li data-value =value 2>在这里，您可以添加任何HTML标签，例如< input style ='width：30px;'type ='text'/>文本框...;）< / li> < li data-value =value 3>选项3< / li>< / ul>  

编辑： -

检查下方点击事件我也更新了我的片段..你现在可以检查

  $（body）。on（click ，＃ddlDemoDropdown li，function（）{
 var selectedValue = $（this）.attr（'data-value'）
 alert（selectedValue）
}）; 
 

I used the following html to make a dropdown:

<div class="container">
<select id="search-pax" name="pax" class="ls-select ">
  <p>Start the selection</p>
  <option value="1">1 gas <span>1700</span></option>
  <option value="2">2 gaste</option>                    
  <option value="3">3 gaste</option>                    
  <option value="4">4 gaste</option>                    
  <option value="5">5 gaste</option>                    
  <option value="6">6 gaste</option>                    
  <option value="7">7 gaste</option>                    
  <option value="8">8 gaste</option>                    
  <option value="9">9 gaste</option>

  <option value="10">10 gaste</option>              
  <option value="11">11 gaste</option>              
  <option value="12">12 gaste</option>              
  <option value="13">13 gaste</option>              
  <option value="14">14 gaste</option>              
  <option value="15">15 gaste</option>              
  <option value="16">16 gaste</option>              
  <option value="17">17 gaste</option>              
  <option value="18">18 gaste</option>              
  <option value="19">19 gaste</option>              
  <option value="20">20 gaste</option>              
  </select> 
</div>

So, as you can see here in the html and the running snippet, I tried to add paragraph tag inside the select tag, tried styling the option and nothing works.

The objective is to achieve something like the photo, where I select an item,the item would go to the input field.

Hope you can help.

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: #ddd; }
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)
    });