Вот один из способов сделать это, хотя я бы предпочел более плагинный подход (нежели жесткое программирование HTML ul):
$('#selectUl li:not(":first")').addClass('unselected');
// Used to hide the 'unselected' elements in the ul.
$('#selectUl').hover(
function(){
// mouse-over
$(this).find('li').click(
function(){
$('.unselected').removeClass('unselected');
// removes the 'unselected' style
$(this).siblings('li').addClass('unselected');
// adds 'unselected' style to all other li elements
var index = $(this).index();
$('select option:selected').removeAttr('selected');
// deselects the previously-chosen option in the select
$('select[name=size]')
.find('option:eq(' + index + ')')
.attr('selected',true);
// assumes a 1:1 relationship between the li and option elements
});
},
function(){
// mouseout (or mouseleave, if they're different, I can't remember).
});
Демонстрация JS Fiddle .
Отредактировано для включения alert, демонстрирующее изменения в значении элемента select: Демонстрация JS Fiddle .
Отредактировано , чтобы включить CSS и HTML, используемые в демо:
HTML
<select name="size">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
<ul id="selectUl">
<li>small</li>
<li>medium</li>
<li>large</li>
</ul>
CSS:
select {
opacity: 0.5;
}
ul {
width: 8em;
line-height: 2em;
}
li {
display: list-item;
width: 100%;
height: 2em;
border:1px solid #ccc;
border-top-width: 0;
text-indent: 1em;
background-color: #f90;
}
li:first-child {
border-top-width: 1px;
}
li.unselected {
display: none;
background-color: #fff;
}
ul#selectUl:hover li.unselected {
background-color: #fff;
}
ul#selectUl:hover li,
ul#selectUl:hover li.unselected {
display: list-item;
}
ul#selectUl:hover li {
background-color: #fc0;
}
ul#selectUl li:hover,
ul#selectUl li.unselected:hover {
background-color: #f90;
}
Это вызываетменю, чтобы скрыть элементы unselected до тех пор, пока не наведется указатель ul, а затем отобразить все параметры и использовать событие click(), чтобы присвоить имя класса unselected неотключенномуэлементы;что позволяет щелкнуть элемент по-прежнему видимым при наведении мыши.
Приведенный выше CSS отражает самое последнее редактирование, чтобы сделать выбранный в данный момент, и :hover -ed, li более видимым.
Последняя демонстрация JS Fiddle .
Отредактировано потому что, ну, мне стало немного скучно.И не было ничего лучше, поэтому я сделал простой плагин:
(function($) {
$.fn.selectUl = function(){
var $origSelect = $(this);
var newId = $(this).attr('name') + '-ul';
var numOptions = $(this).children().length;
$('<ul id="' + newId + '" class="plainSelect" />')
.insertAfter($(this));
for (var i = 0; i < numOptions; i++) {
var text = $(this).find('option').eq(i).text();
$('<li />').text(text).appendTo('#' + newId);
}
if ($(this).find('option:selected')) {
var selected = $(this).find('option:selected').index();
$('#' + newId)
.find('li')
.not(':eq(' + selected + ')')
.addClass('unselected');
}
$('#' + newId + ' li')
.hover(
function(){
$(this).click(
function(){
var newSelect = $(this).index();
$(this)
.parent()
.find('.unselected')
.removeClass('unselected');
$(this)
.parent()
.find('li')
.not(this)
.addClass('unselected');
$($origSelect)
.find('option:selected')
.removeAttr('selected');
$($origSelect)
.find('option:eq(' + newSelect + ')')
.attr('selected',true);
});
},
function(){
});
// assuming that you don't want the 'select' visible:
$(this).hide();
return $(this);
}
})(jQuery);
$('#sizes').selectUl();
JS Fiddle demo, включая «плагин» .
Примечания:
- Это не совсем позиционировано, так что если у вас есть более одного
select (что вы, безусловно, можете сделать, и работает нормально), он делает винт со страницей-произвести немного (или много), но это можно изменить в CSS (я думаю, хотя я еще не пробовал). - Это может быть возможно с некоторыми опциями, возможно, позволяя
dl элементов, которые будут использоваться вместо текущего ul, что позволит дать объяснение доступных опций. - Я подозреваю, что он может быть оптимизирован намного больше, чем в настоящее время, ноЯ не, безрассудно, конечно, как.Возможно, немного поспать и, поздно, просматривая jQuery API , может предложить некоторые идеи (хотя, если кто-то видит что-то очевидное, оставьте комментарий! Или возьмите JS Fiddle и, если хотите,лучше термин, разветвите его (хотя я, очевидно, буду признателен за ссылки на любые последующие ветки / обновления).
- Я не совсем уверен, какие варианты лицензирования мне доступны (так как все на SO - это CreativeCommons cc-by-sa , согласно Джеффу Этвуду , и нижний колонтитул этого сайта, в любом случае ), но за то, что он того стоитЯ очень рад, что кто-то может взять все вышеперечисленное и делать с ним все, что угодно (если он полезен, получайте удовольствие!).
Отредактировано , потому что я чувствовал, что должен быть видимый элемент «руководства», а также попытался объяснить кое-что из того, как все это работает.
Учитывая html:
<select name="sizes" id="sizes" class="makePlain" title="Select a size:">
<option value="xxs">XX-Small</option>
<option value="xs">X-Small</option>
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Large</option>
<option value="xl">X-Large</option>
<option value="xxl">XX-Large</option>
</select>
Используйте jQuery для вызова плагина:
$('#sizes').selectUl();
. Принимает вышеуказанный выбор и создает ul со следующей разметкой:
<ul id="sizes-ul" class="plainSelect">
<li class="guidance">Select a size:</li>
<li>XX-Small</li>
<li class="unselected">X-Small</li>
<li class="unselected">Small</li>
<li class="unselected">Medium</li>
<li class="unselected">Large</li>
<li class="unselected">X-Large</li>
<li class="unselected">XX-Large</li>
</ul>
* 1094.* Используемый CSS (в демоверсии):
ul.plainSelect {
/* targets those 'ul' elements created by the plug-in */
border: 1px solid #000;
}
ul.plainSelect li {
/* this styles the 'selected' li 'option' element */
background-color: #f90;
display: list-item;
}
ul.plainSelect li.guidance {
/* this is the 'Select a Reason' guidance/explanation from the image in the question */
border-bottom: 1px solid #000;
padding: 0.3em;
font-weight: bold;
font-size: 1.2em;
background-color: #fff;
}
ul.plainSelect li.unselected {
/* hides the 'unselected' options, and removes the background-color for contrast */
background-color: #fff;
display: none;
}
ul.plainSelect:hover li,
ul.plainSelect:hover li.unselected {
/* ensures that the 'li' elements pop-up when the list is hovered over, */
/* and act/display like 'li' elements */
display: list-item;
}
Демоверсия JS Fiddle .