selectpick美化下拉框插件

 查看演示  website  立即下载

修改者 iulog.com  

修改日期 2016-01-28

修改内容:

 1.settings增加container容器的配置项 默认加载到body内

 2.去除JS样式配置 改到css里控制

 3.设置默认显示在div上的值(即selectText配置)为当前select的选中值

 4.点击下拉选项后 同时设置原有下拉框select的值

 5.提供重新激活被disabled的下拉框的方法

selectpick是一款jquery开发的美化下拉框插件，具有响应快，美观，灵活，兼容性好的优点。代码配置很简单。且也支持对象级联操作。

配置详情：

var settings = {		
	container:"body",//模拟select生成的DIV存放的父容器		
        height: 30, // 下拉框的高度
        width: 150, // 下拉框的宽度
        disabled: false, // 是否禁用,默认false不禁用
        onSelect: "" // 点击后选中回调函数
}

重新激活被disabled的下拉框

function enAble(){
    $("#selectpick_test_2").parent().remove();
    $("#test_2").selectpick({container:'.test_2',disabled:false});
}

使用：

<script type="text/javascript">
  $(function(){
    $(".test").selectpick({ // 这里面是settings里面的配置项});
  });
</script>

<select class="test">
  <option>请选择<option>
  <option>选项1<option>
</select>

==============以下内容由 yulu  提供===========

//重置

$("#reset").bind("click", function(event) {
    $(".selectpick_div_" + elem_id + " span").first().text($(obj).children("option").first().text());
});

==========以下方法由___King。提供==================

点击下拉选项时最好提供键盘点击响应事件，点击上下方向键可进行选择。一下是我提供的键盘响应事件代码，可能有不足，但是可以借鉴一下。

/*响应键盘上、下方向、回车事件*/
               document.onkeydown= function(event) {
                   var e = event || window.event || arguments.callee.caller.arguments[0];
                               
                   if (e && e.keyCode == 38) {
                       if ($(".selectpick_ul_selectOption").find($("li"))[0].className==$(".selectpick_ul_selectOption").find($(".selectpick_options_selected"))[0].className) {
                           return;
                       }
                       $(".selectpick_ul_selectOption").find($(".selectpick_options_selected")).css({
                           "background-color": "",
                           "color": "#000"
                       }).removeClass("selectpick_options_selected").prev().css({
                           "background-color": settings.optionColor,
                           "color": "#fff"
                       }).addClass("selectpick_options_selected");
                   }
                   if (e && e.keyCode == 40) {
                       var length = $(".selectpick_ul_selectOption").find($("li")).length;
                       if ($(".selectpick_ul_selectOption").find($("li"))[length-1].className==$(".selectpick_ul_selectOption").find($(".selectpick_options_selected"))[0].className) {
                           return;
                       }
                       $(".selectpick_ul_selectOption").find($(".selectpick_options_selected")).css({
                           "background-color": "",
                           "color": "#000"
                       }).removeClass("selectpick_options_selected").next().css({
                           "background-color": settings.optionColor,
                           "color": "#fff"
                       }).addClass("selectpick_options_selected");                   }
                   if (e && e.keyCode == 13) { //enter 键 
                       var value=$(".selectpick_ul_selectOption").find($(".selectpick_options_selected")).children("label").first().text();
                       var text = $(".selectpick_ul_selectOption").find($(".selectpick_options_selected")).children("label").first().next().text();
                       if (value==""&&text=="") {
                           return;
                       }
                       $(".selectpick_div_" + elem_id + " span").first().text($(".selectpick_ul_selectOption").find($(".selectpick_options_selected")).children("label").first().next().text());
                       $(".selectpick_options_" + elem_id).empty().hide();
                       // 回调函数
                       if (settings.onSelect != undefined && settings.onSelect != "" && typeof settings.onSelect == "function") {
                           settings.onSelect(value,text);
                       }
                        
                   }
                   }

PREVIOUS:
NEXT:
jquery自定义滚动条
js贪吃蛇