如何将输入文本插入 select 选项
How to Insert input text in to select option
我正在尝试在 <select>
元素的 <option>
内插入输入文本字段。我正在使用 JSP。以下是我正在尝试做的事情,但没有用。
<!--this is the code-->
<select multiple="multiple" size="10">
<option value="option1">Option 1<input type="text" value="A" style="width: 20px"/></option>
<option value="option2">Option 2<input type="text" value="B" style="width: 20px"/></option>
<option value="option3">Option 3<input type="text" value="C" style="width: 20px"/></option>
<option value="option4">Option 4<input type="text" value="D" style="width: 20px"/></option>
</select>
感谢任何帮助。
select 标签不支持您查找的功能。但是有一个解决方法。您需要一个溢出容器、列表和封闭输入。试试下面的例子。
.container {
height: 100px;
overflow: hidden;
overflow-y: auto;
border: 1px ridge grey;
display: inline-block;
}
.list-box {
list-style: none;
margin: 0px;
padding: 0px;
width: 175px;
}
.list-item {
margin: 3px;
}
.list-item input[type=text] {
width: 149px;
}
<div class="container">
<ul class="list-box">
<li class="list-item">
<input type="text" />
</li>
<li class="list-item">
<input type="text" />
</li>
<li class="list-item">
<input type="text" />
</li>
<li class="list-item">
<input type="text" />
</li>
<li class="list-item">
<input type="text" />
</li>
</ul>
</div>
我正在尝试在 <select>
元素的 <option>
内插入输入文本字段。我正在使用 JSP。以下是我正在尝试做的事情,但没有用。
<!--this is the code-->
<select multiple="multiple" size="10">
<option value="option1">Option 1<input type="text" value="A" style="width: 20px"/></option>
<option value="option2">Option 2<input type="text" value="B" style="width: 20px"/></option>
<option value="option3">Option 3<input type="text" value="C" style="width: 20px"/></option>
<option value="option4">Option 4<input type="text" value="D" style="width: 20px"/></option>
</select>
感谢任何帮助。
select 标签不支持您查找的功能。但是有一个解决方法。您需要一个溢出容器、列表和封闭输入。试试下面的例子。
.container {
height: 100px;
overflow: hidden;
overflow-y: auto;
border: 1px ridge grey;
display: inline-block;
}
.list-box {
list-style: none;
margin: 0px;
padding: 0px;
width: 175px;
}
.list-item {
margin: 3px;
}
.list-item input[type=text] {
width: 149px;
}
<div class="container">
<ul class="list-box">
<li class="list-item">
<input type="text" />
</li>
<li class="list-item">
<input type="text" />
</li>
<li class="list-item">
<input type="text" />
</li>
<li class="list-item">
<input type="text" />
</li>
<li class="list-item">
<input type="text" />
</li>
</ul>
</div>