How to make a dropdown menu without html select
I used the following html to create the 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 snippet running , I tried adding a paragraph tag inside the select tag, tried the stylish one and nothing works.
The goal is to achieve something like a photo where I select an element, the element will go to the input field.
Hope you can help.
source to share
USE <ul>
<li>
Hello,
If you want to add tags HTML
inside your list of items. The best way is to use <ul>
<li>
with a combination css
and some tricks Jquery
to display as a dropdown
Try below example 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 have updated my snippet as well. Now you can check
$("body").on("click", "#ddlDemoDropdown li", function() {
var selectedValue = $(this).attr('data-value')
alert(selectedValue)
});
source to share
I suggest you use optgroup to set the element / title you want. <p>
is not a valid element in <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>
source to share
Use select2 instead of using the select box.
Please follow the examples and code given here:
https://select2.github.io/examples.html
This will help you achieve what you want.
thank
source to share
you can use and customize this plugin. this plugin will help provide search functionality and many other features. how it works behind what you see will be the selected html and the plugin will convert it to custom html, which you can further modify and implement styles according to your taste https://harvesthq.github.io/chosen/
source to share
Based on the answer, I achieved what I wanted, as you saw in the 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: #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());
});
source to share
Below is an example of a dropdown with ul
and li
from 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.com/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>
source to share