Is it possible to have an option list in two columns? For example that an option has a text that is on the left side and another that is on the right, but in the same row.
Example:
+-----select options-----+
option1 option2
option3 option4
+-----------------------+
It's not possible to do that with a standard select but you can simulate it. Below is an example which you can modify according to your needs.
When the form is submitted, the selected option is being sent as a hidden 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>