Put Input Inside Select
Is there a way to place an INPUT field inside select?
Solution 1:
<datalist> Element
The datalist element is intended to provide a better mechanism for this concept.
<inputtype="text"name="example"list="exampleList"><datalistid="exampleList"><optionvalue="A"><optionvalue="B"></datalist>For more information, see
Solution 2:
It is not possible to place an INPUT field inside select. You can create your own custom plugin using jquery. Try the following code:
$(document).ready(function() {
$('.dropdown-menu input').click(function(e) {
e.stopPropagation();
});
$('.dropdown a').click(function() {
$('.dropdown').addClass("open");
});
$('.dropdown-menu li').click(function() {
$('.dropdown-toggle b').remove().appendTo($('.dropdown-toggle').text($(this).text()));
});
});.nav {
margin-left: 0;
margin-bottom: 20px;
list-style: none;
}
ul,
ol {
padding: 0;
margin: 0010px25px;
}
.dropup,
.dropdown {
position: relative;
}
.open>.dropdown-menu {
display: block;
}
.nav>li>a {
display: block;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px0;
margin: 2px00;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 05px10pxrgba(0, 0, 0, 0.2);
-moz-box-shadow: 05px10pxrgba(0, 0, 0, 0.2);
box-shadow: 05px10pxrgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.dropdown-menu.divider {
height: 1px;
margin: 9px1px;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #ffffff;
}
.dropdown-menu>li>a {
display: block;
padding: 3px20px;
clear: both;
font-weight: normal;
line-height: 20px;
color: #333333;
white-space: nowrap;
}<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ulclass="nav"role="navigation"><liclass="dropdown"><ahref="#"id="drop2"role="button"class="dropdown-toggle"data-toggle="dropdown">--Select Country--<bclass="caret"></b></a><ulclass="dropdown-menu"role="menu"aria-labelledby="drop2"><lirole="presentation"><arole="menuitem"tabindex="-1"href="#">USA</a></li><lirole="presentation"class="divider"></li><lirole="presentation"><arole="menuitem"tabindex="-1"href="#">UK</a></li><lirole="presentation"class="divider"></li><lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Russia</a></li><lirole="presentation"class="divider"></li><lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Others <inputtype="text"id="other"/></a></li></ul></li></ul>Solution 3:
You can do something like this:
Link for to: JsFiddle
Html:
<inputtype="text"name='text'><br><br><selectname="menu_files"class="form-control" ><optionid='text1'> Text 1</option><optionid="text2"> Text 2</option></select><p></p>JS:
$(document).ready(function(){
$( "input" ).keyup(function() {
var value = $( this ).val();
$( "p" ).text( value );
$('#text1').text(value);
})
.keyup();
})
Solution 4:
We can achive it putting the input tag "next to" and not "inside" the select tag but forcing them into a limited and fixed area like a table td.
functionselection(){
var selected=document.getElementById("select1").value;
if(selected==0){
document.getElementById("input1").removeAttribute("hidden");
}else{
//elsewhere actions
}
}td{
width: 170px;
max-width: 170px;
overflow: hidden;
white-space: nowrap;
}
input{
width: 164px;
}<table><tr><td><inputid="input1"hidden="hidden"placeholder="input data"><selectonchange="selection()"id="select1"><optionvalue="-1"></option><optionvalue="0">-make your own choice-</option><optionvalue="1">choice 1</option><optionvalue="2">choice 2</option></select></td></tr></table>
Post a Comment for "Put Input Inside Select"