Put input inside select - html

Question

Is there a way to place an INPUT field inside select?
<select name="menu_files" class="form-control" >
<option value="new_menu"> <input type="text"></option>
</select>

Answer 1

<datalist> Element
The datalist element is intended to provide a better mechanism for this concept.
<input type="text" name="example" list="exampleList">
<datalist id="exampleList">
<option value="A">
<option value="B">
</datalist>
For more information, see
MDN HTML Reference - <datalist> Element

Answer 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: 0 0 10px 25px;
}
.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: 5px 0;
margin: 2px 0 0;
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: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.dropdown-menu .divider {
height: 1px;
margin: 9px 1px;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #ffffff;
}
.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 20px;
color: #333333;
white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav" role="navigation">
<li class="dropdown"> --Select Country--<b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">USA</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">UK</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Russia</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Others <input type="text" id="other"/></a>
</li>
</ul>
</li>
</ul>

Answer 3

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.
function selection(){
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>
<input id="input1" hidden="hidden" placeholder="input data">
<select onchange="selection()" id="select1">
<option value="-1"></option>
<option value="0">-make your own choice-</option>
<option value="1">choice 1</option>
<option value="2">choice 2</option>
</select>
</td>
</tr>
</table>
jsfiddle

Answer 4

You can also code like this.
<label class="text-left text-uppercase mt-1 sidenav-text w-100" for="category" onclick="menuShow();" >Category</label>
<p id="demo"></p>
and in remaining js
<script>
var demo = document.getElementById('demo');
function menuShow(){
demo.innerHTML = `
<input type="radio" name="select" value="women"> Women<br>
<input type="radio" name="select" value="women"> Men<br>
<input type="radio" name="select" value="women"> Kid<br>
<input type="radio" name="select" value="women"> Boy<br>
`;
}
</script>