HTML select 选项在框中打开

Question

I make a selection with HTML select. I need the options to be opened in a separate div or popup. I explored resources like jquery and javascript. I could not come to a conclusion. Or I called in the wrong way. I do not know.

In other words, not as droptown, but like the options that are clicked.

<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/

The place we clicked for Dropdown should still be clickable. When I click it, the options should open in a div or a popup.

Answer 1

Try this (I used this in many projects)

 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>