Могу ли я создать элемент <select> для отображения столбцов?

Я пытаюсь создать список на основе столбцов в <select> элемент с multiple = multiple - то, что я хотел бы увидеть в меню:

Opt1    Opt5    Opt9
Opt2    Opt6    Opt10
Opt3    Opt7    Opt11
Opt4    Opt8    Opt12

Возможно ли это? Я, конечно, открыт для этого в jQuery, но предпочитаю CSS.

Ответы

Ответ 1

Это, безусловно, возможно.

Есть несколько вариантов, предложенных в аналогичном SO-вопросе.

И этот очень популярный вопрос берет его немного дальше, добавляя автозаполнение.

И если вы в google-списке jquery с несколькими колонками, вы можете найти еще несколько вариантов.

BTW, атрибут "multiple" указывает, может ли пользователь выбирать несколько элементов в списке, а не в нескольких столбцах, отображаемых в раскрывающемся списке.

Ответ 2

Я не думаю, что это возможно с помощью CSS.

Однако вы можете сделать три выбора и использовать javascript, чтобы убедиться, что выбран только один из них.

Вот простой пример, как это сделать с помощью jQuery:

$('.columnselect').click(function()
{
    var id = $(this).attr('id');
    $('.columnselect:not([id="' + id + '"]) option:selected').attr('selected', false);
})

См. http://jsfiddle.net/eJmgz/

Если вам нравится иметь множественный выбор, просто удалите Javascript-код.

Ответ 3

jQuery softSelect плагин делает именно то, что вы ищете:-) http://shawnchin.github.com/jquery-gentleSelect/

Это упрощает визуализацию элементов Select и MultiSelect в нескольких столбцах/строках и дает вам полный контроль над макетом и дизайном. Гораздо проще, чем пытаться сделать это в CSS; -)

Ответ 4

Нет - вы не можете стилизовать ниспадающие выборки, используя только CSS (есть несколько исключений для Google Chrome), потому что они являются частью операционной системы, а не браузера.

Однако вы можете использовать JavaScript (есть несколько действительно хороших плагинов jQuery, таких как: uniformjs), где вы по существу скройте исходный снимок выбора и замените его на список <li> -list или другой элемент по вашему выбору - который вы можете создать.