Question

我正在尝试在<option>元素的<select>内插入输入文本字段。我正在使用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>

感谢任何帮助。

Answer 1

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>

如何插入输入文本以选择选项

1 个答案: