admin管理员组

文章数量:1291023

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.

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.

  • javascript
  • jquery
  • html
Share Improve this question asked Apr 12, 2017 at 7:04 Sidney SousaSidney Sousa 3,61411 gold badges53 silver badges115 bronze badges 1
  • Possible duplicate of Can I use HTML tags in the options for select elements? – Ozan Commented Apr 12, 2017 at 7:07
Add a ment  | 

7 Answers 7

Reset to default 2

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>

USE <ul> <li>

Hi,

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

Here is an example for a dropdown with the ul and li from the html code.

$(document).ready(function(){
  $("#input").click(function(){
    $("#selectives").css('display', 'block');
    $("input").css('borderRadius', '2px 2px 0px 0px');
  });


  $(".auswahl").click(function(){
    var das = $(this).html();
    $("#input").val(das);
    $("#selectives").css('display', 'none');
    $("input").css('borderRadius', '2px');
  });

});
p {margin: 0px; padding: 0px;}
body {height: 510px; font-family: Arial}
#selectives {height: 10px; position: absolute; top: 32px; left: -32px; display: none;}
#input {position: relative; }
input:hover {cursor: pointer; }
input::-moz-selection {background: white; color: #000}
input {width: 107px; border-radius: 2px; border: 0.1em solid black; -webkit-appearance: none; padding: 5px; font-size: 10px;}
ul {margin-top: 0px;list-style-type: none; text-align: left;}
li {width: 107px; border-color: black black orange black; border-style: solid; border-width: 1px; padding: 5px; border-radius: 0px; font-size: 10px; border-top: 0px;}
li:last-child {border-radius: 0px 0px 2px 2px; border: 1px solid black; border-top: 0px;}
li:first-child {border-radius: 0px; border-bottom: 1px solid orange; border-top: 0px;}
li:hover {background-color: ghostwhite; cursor: pointer;}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input readonly id="input" type="text" value="Dropdown">
<div id="selectives">
  <ul>
    <li class="auswahl">Hello</li>
    <li class="auswahl">This</li>
    <li class="auswahl">Is</li>
    <li class="auswahl">An</li>
    <li class="auswahl">Example</li>
  </ul>
</div>

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.

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

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/

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

本文标签： javascriptHow make to make dropdown without html selectStack Overflow

版权声明：本文标题：javascript - How make to make dropdown without html select - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741522276a2383258.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。