我正在使用jQuery 1.11.我想设置我的选择下拉菜单,因为,让我们面对它,默认看起来很糟糕.所以我发现了一些风格
.selectMenu {
font-family: 'Oxygen',sans-serif;
font-size: 20px;
height: 50px;
-webkit-appearance: menulist-button;
}
.select-hidden {
display: none;
visibility: hidden;
padding-right: 10px;
}
.select {
cursor: pointer;
display: inline-block;
position: relative;
font-size: 16px;
color: #fff;
width: 220px;
height: 42px;
}
.select-styled {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: gray;
padding: 11px 12px;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.select-styled:after {
content: "";
width: 0;
height: 0;
border: 7px solid transparent;
border-color: #fff transparent transparent transparent;
position: absolute;
top: 16px;
right: 10px;
}
.select-styled:hover {
background-color: #7b7b7b;
}
.select-styled:active,.select-styled.active {
background-color: #737373;
}
.select-styled:active:after,.select-styled.active:after {
top: 9px;
border-color: transparent transparent #fff transparent;
}
.select-options {
display: none;
position: absolute;
top: 100%;
right: 0;
left: 0;
z-index: 999;
margin: 0;
padding: 0;
list-style: none;
background-color: #737373;
overflow: scroll;
}
.select-options li {
margin: 0;
padding: 12px 0;
text-indent: 15px;
border-top: 1px solid #676767;
-webkit-transition: all 0.15s ease-in;
transition: all 0.15s ease-in;
}
.select-options li:hover {
color: gray;
background: #fff;
}
.select-options li[rel="hide"] {
display: none;
}
ul.select-options {
max-height: 15em;
overflow-y: scroll;
overflow-x: hidden;
}
并添加了这个jQuery
$(function() {
$('select').each(function(){
styleSelectMenu($(this));
});
});
// This method applies the styles to our select menu
function styleSelectMenu(selectMenu)
{
var $this = $(selectMenu),numberOfOptions = $(selectMenu).children('option').length;
/*** NEW - start ***/
var $paddingCalculator = $('<div />',{
'class' : "select-styled test"
}).css({
width : 0,visibility : "hidden"
}).appendTo("body");
$this.addClass('select-hidden');
var paddingWidth = $paddingCalculator.outerWidth() + 10;
$paddingCalculator.remove();
//var selectWidth = $this.width() + paddingWidth;
var selectWidth = $this.outerWidth() + paddingWidth;
//alert(selectWidth);
if ( !$this.parent().hasClass('select') ) {
var $wrapper = $("<div />",{
'class' : "select"
}).css({
width : selectWidth
});
$this.wrap( $wrapper );
} // if
/*** NEW - end ***/
if ( !$this.next().hasClass('select-styled') ) {
$this.after('<div class="select-styled"></div>');
} // if
var $styledSelect = $this.next('div.select-styled');
$styledSelect.text($this.children('option').eq(0).text());
if ( $styledSelect.parent().find('ul').length > 0 ) {
$styledSelect.parent().find('ul').remove();
} // if
var $list = $('<ul />',{
'class': 'select-options'
}).insertAfter($styledSelect);
for (var i = 0; i < numberOfOptions; i++) {
$('<li />',{
text: $this.children('option').eq(i).text(),rel: $this.children('option').eq(i).val()
}).appendTo($list);
}
var $listItems = $list.children('li');
// This is the event when someone opens the list
$styledSelect.unbind('click')
$styledSelect.click(function(e) {
e.stopPropagation();
$('div.select-styled.active').each(function(){
$(this).removeClass('active').next('ul.select-options').hide();
});
$(this).toggleClass('active').next('ul.select-options').toggle();
});
// This is the event when someone actually selects something from the list
$listItems.unbind('click.selectStyledItem')
$listItems.bind('click.selectStyledItem',function(event) {
clickListItem(event,$styledSelect,$this,$(this),$list);
});
$(document).click(function(event) {
$styledSelect.removeClass('active');
$list.hide();
});
var selectedIndex = $this[0].selectedIndex;
if (selectedIndex > 0) {
var name = $this.attr("name")
var selectedText = $( "select[name='" + name + "'] option:selected" ).text();
selectItemFromStyledList($styledSelect,selectedText,$list);
} // if
}
// This is the method that will select an item from the styled list
function selectItemFromStyledList(styledSelect,selectMenu,listToHide)
{
$(styledSelect).text(selectedText).removeClass('active');
$(selectMenu).val($(selectMenu).attr('rel'));
$(listToHide).hide();
// Select option in the underlying list so that the form gets submitted
// with the right values
selectedOption = $(selectMenu).find("option").filter(function () { return $(this).html() == selectedText; });
$(selectMenu).find("option[selected='selected']").removeAttr("selected");
$(selectedOption).attr("selected","selected");
} // selectItemFromStyledList
function clickListItem(event,styledSelect,listItemClicked,list)
{
var $styledSelect = $(styledSelect);
var $selectMenu = $(selectMenu);
var $listItem = $(listItemClicked);
var $list = $(list);
event.stopPropagation();
var selectedText = $listItem.text();
selectItemFromStyledList($styledSelect,$selectMenu,$list)
} // clickListItem
小提琴说明了这一点 – http://jsfiddle.net/cwzjL2uw/1/.问题是,虽然我已经实现了这种风格,但我无法复制普通选择菜单所具有的键盘行为.我的问题是,如何使我的菜单表现得如此,当我点击字母“A”时,第一个“A”项被选中(在本例中为“Alabama”),就像常规选择菜单一样.
解决方法
以下是使用代码完成此操作的示例.通过监听活动下拉列表上的键并迭代选项来查找并滚动到匹配项.
function styleSelectMenu(selectMenu)
{
.......
$(document).click(function(event) {
$styledSelect.removeClass('active');
$list.hide();
});
//Example
var keyUps = "",timeOut,$selectOptions = $('.select-options');
$(document).keyup(function(event){
if(!$selectOptions.prev().hasClass('active')){
return false;
}
if(event.key){
keyUps += event.key;
retrieveFromOptions($selectOptions,keyUps);
}
clearTimeout(timeOut);
timeOut = setTimeout(function(){
keyUps = "";
},250);
.......
});
function retrieveFromOptions($options,val){
$options.find('li').each(function(index){
if(this.textContent.substring(0,val.length).toLowerCase() === val.toLowerCase()){
$options.scrollTop(43*index);
return false;
}
});
}
请注意,此解决方案不会实现相当于将鼠标悬停在项目上的选择效果.这可以做,但需要更多的工作.
我建议使用像ConnorsFan这样的解决方案,或者只使用css来设置select元素的样式而不替换它.这样您就可以保留原生功能.
有许多CSS框架实现了select元素的样式.
Bootstrap就是一个例子.
