¿Es posible tener una lista de opciones en dos columnas? Por ejemplo que una opción tiene un texto que está del lado izquierdo y otro que está del lado derecho, pero en la misma fila.
Ejemplo:
+-----select options-----+ option1 option2 option3 option4 +-----------------------+No es posible hacer eso con una select estándar, pero puede simularlo. A continuación se muestra un ejemplo que puede modificar según sus necesidades.
Cuando se envía el form , la opción seleccionada se envía como una input oculta.
$("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>