HTML 选择选项在框中打开答案

【问题标题】：HTML select options open in boxHTML 选择选项在框中打开
【发布时间】：2020-12-26 22:21:18
【问题描述】：

我使用 HTML select 进行选择。我需要在单独的 div 或弹出窗口中打开选项。我探索了 jquery 和 javascript 等资源。我无法得出结论。或者我打错了电话。我不知道。

换句话说，不像droptown，而是像被点击的选项。

<select>
 <option></option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>

http://jsfiddle.net/cj0aymh1/

我们点击下拉的地方应该仍然可以点击。当我单击它时，选项应该在 div 或弹出窗口中打开。

【问题讨论】：

您可以有一个输入字段，一旦点击它会打开一个带有选项的弹出窗口，一旦点击一个选项，关闭弹出窗口并将点击的选项传递给输入字段

标签： javascript html jquery

【解决方案1】：

试试这个（我在很多项目中都使用过这个）

   select, ul { height: 100px; overflow: auto; width:300px; border: 1px solid #000; }
   ul { list-style-type: none; margin: 0; padding: 0; overflow-x: hidden; }
   li { margin: 0; padding: 0; }
   label { display: block; color: WindowText; background-color: Window; margin: 0; padding: 0; width: 100%; }
   label:hover { background-color: Highlight; color: HighlightText; }

<ul>
 
     <li><label for="regcode"><input type="checkbox" name="regcode" id="regcode" value="TEST1">TEST1</label></li>
     <li><label for="regcode"><input type="checkbox" name="regcode" id="regcode" value="TEST2">TEST2</label></li>
     <li><label for="regcode"><input type="checkbox" name="regcode" id="regcode" value="TEST3">TEST3</label></li>
     <li><label for="regcode"><input type="checkbox" name="regcode" id="regcode" value="TEST4">TEST4</label></li>
     <li><label for="regcode"><input type="checkbox" name="regcode" id="regcode" value="TEST5">TEST5</label></li>
     <li><label for="regcode"><input type="checkbox" name="regcode" id="regcode" value="TEST6">TEST6</label></li>
     <li><label for="regcode"><input type="checkbox" name="regcode" id="regcode" value="TEST7">TEST7</label></li>
     <li><label for="regcode"><input type="checkbox" name="regcode" id="regcode" value="TEST8">TEST8</label></li>


</ul>

【讨论】：

谢谢，但没有。 jsfiddle.net/cj0aymh1 我们点击下拉的地方应该还是可以点击的。当我单击它时，选项应该在 div 或弹出窗口中打开。