是否有可能在两列中有一个选项列表?例如,一个选项有一个文本在左侧,另一个文本在右侧,但在同一行。
的例子:
+-----select options-----+
option1 option2
option3 option4
+-----------------------+
这是不可能做到的标准select
,但你可以模拟它。下面是一个例子,你可以根据你的需要修改。
当form
被提交时,所选择的选项作为隐藏的input
被发送。
$("body").on("click", ".selected", function() {
$(this).next(".options").toggleClass("open");
});
$("body").on("click", ".option", function() {
var value = $(this).find("span").html();
$(".selected").html(value);
$("#sel").val(value);
$(".options").toggleClass("open");
});
.container {
display: flex;
flex-wrap: wrap;
width: 160px;
}
.selected {
border: thin solid darkgray;
border-radius: 5px;
background: lightgray;
display: flex;
align-items: center;
cursor: pointer;
height: 1.5em;
margin-bottom: .2em;
padding-left: .5em;
min-width: 150px;
position: relative;
}
.selected:after {
font-family: FontAwesome;
content: "f0d7";
margin-left: 1em;
position: absolute;
right: .5em;
}
.options {
display: none;
margin: 0;
padding: 0;
width: 100%;
}
.options.open {
display: flex;
flex-wrap: wrap;
}
li {
display: flex;
align-items: center;
cursor: pointer;
width: 50%;
}
li:nth-child(odd) {
justify-content: flex-start;
}
li:nth-child(even) {
justify-content: flex-end;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<form>
<input type="hidden" id="sel">
<div class="container">
<div class="selected">Select an option</div>
<ul class="options">
<li class="option"><span>Option 1</span></li>
<li class="option"><span>Option 2</span></li>
<li class="option"><span>Option 3</span></li>
<li class="option"><span>Option 4</span></li>
</ul>
</div>
</form>