当前位置：傲看软件园 → 文章中心 → WEB学院 → JavaScript

select 美化，基于jquery

减小字体

增大字体作者：佚名来源：本站整理发布时间：2009-04-18 09:57:49

起因是在实践中发现input的高度无法改变，也就是说再怎么调整，他的四周都会有空隙，当然只作用于IE，如果调整一下的话，FF下效果又不理想，没有什么好的解决方法，除非用图片模拟，为了追求完美，模拟就模拟吧。

本人习惯用jQuery，于是就找到了nicejform，专门用来美化表单的jquery插件。（我知道坛子上有相关的文章，我也参考过，但是美化不是我的强项，所以就想找现成的）

效果查看

看源码，可以发现没有另外添加样式，id之类的，所以如果不用这个插件了，页面也无需改动

众所周知，表单美化里面select是最不好模拟的，同样nicejforms也没有很好的模拟，那就自己动手改造吧。

3个半小时过去后......

终于被我征服了，彻底地模拟美化了select表单，可以说功能上一点都不差，修改了原版本的一些不足

点击页面空白处，弹出的options不能缩回
无法设置option的value值，一律都是"#"
由于都设置为了"#"，所以如果select放置到了页面的下方，选择后会回到页面顶部

现在这些问题全都解决了，可以正式派上用场了，oh，yeah！

效果查看

 点击下载修改后的文件
10.1日添加

其实上面那个select美化有一个非常大的问题，不过好像没有人注意到，就是当页面载入完后，在页面的底部会出现这些选项，这次重新操刀，不再是对原插件的修修补补，自己重新写了code。

特点：

仅IE有效，FF下保持原状
不接受键盘响应，所以上下键无效，滚轴也无效
其他的应该都模仿的差不多了

由于前台编程也只是我的业余爱好，所以更加细致的模仿，只能靠大家了。

其实我自己也觉得写这么一堆未必有用，但是既然都写出来了，还是放上来吧，有用没用让大家来评价。

浏览地址：http://www.live-my-life-with-yuyi.com/lab/jquery/form_select/

代码:

以下是引用片段：
if($.browser.msie)
$(document).ready(function(){
    //对每一个select进行美化
    $("select").each(function(){
        select_name = $(this).attr("name");
        //取得select的高度
        width = $(this).width();
        //取得input的宽度
        input_width = width-17;
        //取得绝对坐标
        offset = $(this).offset();
        //美化的代码
        select_html = ’<div style="width:’+width+’px;position:absolute;left:’+offset.left+’px;top:’+offset.top+’px"><input type="text" style="width:’+input_width+’px;" autocomlete="off" readonly="true" id="input_’+select_name+’" class="select_input"/><img id="img_’+select_name+’" name="’+select_name+’" class="select_img" src="s.gif" width="17" height="21"></div>’;
        //附加到页面上
        $("body").append(select_html);
        $(this).css({visibility:"hidden"});
        //$(this).css("margin","200px");
        //取得option的数量
        option_num = $("option",$(this)).length;
        //option的高度
        option_height = option_num * 21 > 200 ? 200 : option_num*21;
        //option的宽度
        option_width = width;
        //option的坐标
        option_left = offset.left;
        option_top = offset.top+21;
        //下拉菜单的美化代码
        option_html = "<div class=’select_option_div’ id=option_"+select_name+" style=’height:"+option_height+"px;width:"+option_width+"px;position:absolute;top:"+option_top+"px;left:"+option_left+"px;overflow:auto’>";
        $(this).find("option").each(function(){
            option_html += "<div class=’select_option’>"+$(this).text()+"</div>";
        });
        option_html += "</div>";
        //附加到页面上
        $("body").append(option_html);
        //隐藏选项
        $("#option_"+select_name).hide();
        //设定img id 和 input id
        img_id = "#img_"+select_name;
        input_id = "#input_"+select_name;
        //设定图片点击事件
        $(img_id).click(function(){
            //通过name取得目标id
            dest_id = "#option_"+$(this).attr("name");
            //取得选项的状态是打开还是关闭
            state = $(dest_id).css("display");
            //关闭所有的选项
            $(".select_option_div").hide();
            //开的关，关的开
            if(state == "none"){
                $(dest_id).show();
            }
            else{
                $(dest_id).hide();
            }
        });
        //input的点击事件
        $(input_id).click(function(){
            //取得目标id
            dest_id = $(this).attr("id").substr(6);
            dest_id = "#option_"+dest_id;
            state = $(dest_id).css("display");
            $(".select_option_div").hide();
            if(state == "none"){
                $(dest_id).show();
                //alert("hello");
            }
            else{
                $(dest_id).hide();
            }
        });
        //设置默认选中的项
        obj = document.getElementById(select_name);
        input_id = "#input_"+select_name;
        $(input_id).val(obj.options[obj.selectedIndex].text);
    });
    //当点击选项后的操作
    $(".select_option").click(function(){
        //取得select id
        parent_id = $(this).parent().attr("id");
        parent_id = parent_id.substr(7);
        input_id = "#input_"+parent_id;
        //在input处显示所选项
        $(input_id).val($(this).text());
        //操作select选项
        obj = document.getElementById(parent_id);
        obj.options[obj.selectedIndex].text=$(this).text();
        option_id = "#option_"+parent_id;
        //选中之后隐藏选项
        $(option_id).hide();
    });
    //对option选项应用鼠标移入移出效果
    $(".select_option").hover(function(){$(this).addClass("select_highlight")},function(){$(this).removeClass("select_highlight")});
});
//点击页面函数
$(document).click(function(evt){
    var evt = evt || window.event; // event object
    var target = evt.target || window.event.srcElement; // event target
    var t_className = target.className; // event target id
    if(t_className == "select_img" || t_className == "select_input" || t_className == "select_option"){
        return false;
    }
    else{
    $(".select_option_div").hide();
    };
});