发表新帖
发表新帖

How make to make dropdown without html select

前端 未结
关注
7 1138
后悔当初
后悔当初 2020-12-22 01:32

I used the following html to make a dropdown:



                        
    

    
提交评论
  •  加载中...
  • 梦如初夏
    2020-12-22 02:17

    Based on answer I achieved the desired as you seen in following snippet:

    http://codepen.io/Sidney-Dev/pen/gWYNVe?editors=1111

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list-unstyled" style="list-style: none;">
    <li class="init">--SELECT--</li>
    <li data-value="value 2"><span class="value">Durban</span><span class="numbers">1700</span></li>
    <li data-value="value 3"><span class="value">Durban</span><span class="numbers">1400</span></li>
    <li data-value="value 4"><span class="value">Durban</span><span class="numbers">1200</span></li>
</ul>

    CSS:

    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; }

li{
  display: flex;
  justify-content: space-between;

}
li, ul{
  padding: 0;
  margin: 0;
}

    JS:

    $("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();

    console.log($('.selected .value').text());
});
    0 讨论(0)
  • 说谎
    2020-12-22 02:18

    Instead of using select box use select2.

    Please follow the examples and code here:

    https://select2.github.io/examples.html

    This will help to achieve you want.

    THanks

    0 讨论(0)
  • 不要未来只要你来
    2020-12-22 02:23

    You can use a textbox and a div that you will make visible on click. Inside the div you will have tabular data. It's how many of the ui date inputs are made. Or try to use a framework like jquery, bootstrap, etc ...

    This does need a bit of css styling though.

    0 讨论(0)
  • 一整个雨季
    2020-12-22 02:25

    you can use and customise this plugin. this plugin will help to give searching functionality and many more features. how it works behind the seen there will be a select html and plugin will convert this into the custom html which you can further modify and implement styles according to your taste https://harvesthq.github.io/chosen/

    0 讨论(0)
  • 伪装坚强ぢ
    2020-12-22 02:28

    I suggest you use optgroup to set your desired element/header. <p> is not a valid element under <select>.

    <div class="container">
<select id="search-pax" name="pax" class="ls-select ">
<optgroup label="Start the selection">
  <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> 
</optgroup>            
  </select> 
</div>
    0 讨论(0)
    •  看不清?
    提交回复
    热议问题