Ответ 1
Вот один из способов сделать это, хотя я бы предпочел использовать более плагин (вместо жесткого кодирования 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).
});
Отредактировано, чтобы включить alert, демонстрируя изменения в значении элемента select: JS Fiddle demo.
Отредактировано, чтобы включить 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 и, не имея лучшего термина, развивает его (хотя я, очевидно, ценю ссылки на любые последующие forks/updates).
- Я не совсем уверен, какие варианты лицензирования доступны мне (поскольку все на SO Creative Commons cc-by-sa, согласно Jeff Atwood и footer этого сайта, в любом случае), но за то, что он стоит, я очень доволен тем, кто может взять выше, и, ну, делайте с ним все, что вам нравится (если это полезно, получайте удовольствие!).
Отредактировано, потому что я чувствовал, что должен быть видимый элемент "руководства", а также попытаться объяснить, как все это работает.
Учитывая 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>
Используемый 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;
}