Показать два варианта в окне выбора рядом

Question

Я пытался показать поле выбора с двумя вариантами рядом друг с другом в списке. Это трудно, и я не могу найти какие-либо библиотеки, которые предлагают эту функциональность. Например:

<select>

<option x><option y>
<option x><option y>
<option x><option y>
<option x><option y>
<option x><option y>

</select>

Вы можете увидеть пример этой работы здесь (извините, я не могу сделать jsfiddle, поскольку, очевидно, я не могу заставить его работать!) С выпадающим списком "Right Eye PWR:".

Я попытался переместить опцию, основываясь на ее содержимом, по стилю, то есть с плавающей левой шириной на 50% и с плавающей правой, но мне не очень повезло с этим (тем более что в разных браузерах это было бы не лучшим способом Это). Будем очень благодарны за любые предложения о том, как лучше решить эту проблему. Заранее спасибо.

Answer 1

Чтобы сделать это, вам нужно скачать эту библиотеку jquery. Позволяет сортировать выпадающее меню по столбцам. Добавив это на свой сайт:

    <script type="text/javascript">

                    $(document).ready(function() {
                        $('#selector').gentleSelect(); // apply gentleSelect with default options
                    });

    </script>

После того, как это было добавлено, с помощью их readme вы можете выбрать определенное количество столбцов для отображения в поле выбора.

Вы можете изменить функциональность (как в моем вопросе, положив их рядом с положительными и отрицательными), добавив немного пользовательского кода.

Вы можете увидеть Js Bin здесь