用jquery实现下拉框的美化

最新推荐文章于 2024-11-30 14:00:06 发布

最新推荐文章于 2024-11-30 14:00:06 发布 · 642 阅读

文章标签：

#jQuery #CSS #ViewUI

技术文档专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的下拉菜单美化方法，通过隐藏原始的HTML选择框并用自定义的输入框和图标替代，同时保持了选择框的功能。此方案适用于需要改善用户体验的Web项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Email:cyoubunketu@126.com

<html>
<head>
<script type="text/javascript" language="JavaScript" src="jquery.js"></script>
<script>
$(document).ready(function() {
$("select").each(function(i) {
if (null == this.id || "" == this.id){
$(this).attr("id","jQuery_auto_create_select_id"+i);
}
id = this.id;
jquery_val_w = $(this).width();
jquery_val_p = $(this).offset();
$(this).hide();
jquery_val_t = ct(jquery_val_w,id);
jquery_val_img = ci(jquery_val_w,id);
$(jquery_val_img).click(function(){
if ("none" == $("#" + this.selId + "_div").css("display")){
$("#"+this.selId + "_div").slideDown("fast",findRow(this.selId));
}else{
$("#"+this.selId + "_div").hide();
}
});
$(this).after(jquery_val_img);
$(jquery_val_img).before(jquery_val_t);

$(jquery_val_t).click(function(){
if ("none" == $("#" + this.selId + "_div").css("display")){
$("#"+this.selId + "_div").slideDown("fast",findRow(this.selId));
}else{
$("#"+this.selId + "_div").hide();
}
});

jquery_val_dp = $(jquery_val_t).offset();
jquery_val_divLeft = jquery_val_dp.left;
jquery_val_divTop = jquery_val_dp.top + $(jquery_val_t).height();
jquery_val_param = {left:jquery_val_divLeft,top:jquery_val_divTop,width:jquery_val_w,selId:this.id};
var jquery_val_divNode = cd(jquery_val_param);

$("body").append(jquery_val_divNode);
});
$("body").click(function(){
var divs = $("div").filter(".jQuery_select_div");
$(divs).each(function(){
$(this).hide();
});
});
//alert(document.body.outerHTML);
});

function findRow(id){
var showText = $("#"+id+"_text").val();
$("#"+id+"_div > table").each(function(){
txt = $(this).find("td").text();
$(this).css("background","");
if (showText == txt){
$(this).css("background","whitesmoke");
}
});
}

function ct(w,id){
var jquery_val_t = document.createElement("input");
$(jquery_val_t).attr("id",id+"_text");
$(jquery_val_t).attr("selId",id);
$(jquery_val_t).attr("type","text");
$(jquery_val_t).attr("value",$("#"+id+" option:selected").text());
$(jquery_val_t).attr("readonly","true");
$(jquery_val_t).css("width",w - 15);
$(jquery_val_t).css("marginTop",0);
$(jquery_val_t).css("border","1px solid #d3e4ec");
$(jquery_val_t).css("border-right-style","none");
$(jquery_val_t).css("cursor","hand");

$(jquery_val_t).hover(
function(){
$(this).css("border","1px solid lightsteelblue");
$(this).css("border-right-style","none");
},
function(){
$(this).css("border","1px solid #d3e4ec");
$(this).css("border-right-style","none");
}
);
return jquery_val_t;
}

function ci(jquery_val_w,id){
var jquery_val_i = document.createElement("img");
$(jquery_val_i).attr({src:"sanjiao.gif"});
$(jquery_val_i).attr("height","19");
$(jquery_val_i).attr("selId",id);
$(jquery_val_i).css("cursor","hand");
$(jquery_val_i).css("verticalAlign","bottom");
$(jquery_val_i).css("margin-bottom","1px");
$(jquery_val_i).mousedown(function(){$(this).fadeTo("fast",0.3)});
$(jquery_val_i).mouseup(function(){$(this).fadeTo("fast",1)});
$(jquery_val_i).hover(
function(){
$(this).fadeTo("fast",0.7);
},
function(){
$(this).fadeTo("fast",1);
}
);

return jquery_val_i;
}

function cd(param){
var left = param.left;
var top = param.top;
var width = param.width;
var selId = param.selId;

var d = document.createElement('div');
$(d).css("position","absolute");
$(d).css("width",width + 3);
$(d).css("border","1px solid #d3e4ec");
$(d).css("border-top-style","none");
$(d).css("font-size","12px");
$(d).css("backgroundColor","#FFF");
$(d).addClass("jQuery_select_div");
d.style.posLeft = left;
d.style.posTop = top + 4;
if ($("#"+selId+" option").length > 11){
$(d).css("overflow-y","auto");
$(d).css("height",20 * 11);
$(d).css("scrollbar-face-color","#eef6f9");
$(d).css("scrollbar-highlight-color","#d8eff8");
$(d).css("scrollbar-shadow-color","#d8eff8");
$(d).css("scrollbar-3dlight-color","#d8eff8");
$(d).css("scrollbar-arrow-color","#7fbfe5");
$(d).css("scrollbar-track-color","#eef6f9");
$(d).css("scrollbar-darkshadow-color","#48486c");
$(d).css("scrollbar-base-color","#eef6f9");
}
$("#"+selId+" option").each(function(i){
value = this.value;
text = this.text;
a = ca({value:value,text:text,id:selId,width:width,row:i});
$(d).append(a);
});

$(d).hide();
$(d).attr("id",selId+"_div");
return d;
}

function ca(pam){
var id = pam.id;

var tbl = $("<table></table>");
var trNode = $("<tr></tr>");
var td = $("<td></td>");

$(tbl).css("width","100%");
$(tbl).css("cursor","hand");
$(tbl).css("table-layout","fixed");
$(tbl).css("font-size","12px");

$(tbl).attr("cellSpacing","0");
$(tbl).hover(function(){$(td).css("background","gainsboro")},function(){$(td).css("background","")});

$(td).attr("value",pam.value);
$(td).attr("innerText",pam.text);
$(td).css("padding","2");
$(td).css("height","20");
if (pam.text.length * 12 > pam.width){
$(td).attr("title",pam.text);
}
$(td).css("white-space","nowrap");
$(td).click(function(){
$("#"+id+"_div").hide();
$("#"+id)[0].selectedIndex = pam.row;
$("#"+id+"_text").attr("value",pam.text);
$("#"+id).change();
});

td.appendTo(trNode);
trNode.appendTo(tbl);

return tbl;
}

</script>
</head>
<body>

<select onchange="alert(this.value)" style="width:50px">
<option value="1">第一步</option>
<option value="2">第二步</option>
<option value="3">第三步长长长长长长</option>
<option value="4">第四步</option>
<option value="5">11111</option>
</select>

<select onchange="alert(this.value)" style="width:50px">
<option value="1">第一步</option>
<option value="2">第二步</option>
<option value="3">第三步长长长长长长</option>
<option value="4">第四步</option>
<option value="5">11111</option>
</select>
<select onchange="$('#ct').attr('value',($(this).find('option:selected').text()))">
<option value="1">第一步</option>
<option value="2">第二步</option>
<option value="3">第三步</option>
<option value="4">第四步</option>
</select>
<input type="text" name="ct" id="ct" onfocus="this.blur()">
<br>
<select style="width:500px" id="test" onchange="alert(this.id)">
<option value="1">第一步</option>
<option value="">第二步</option>
<option value="3">第三步</option>
<option value="4">第四步</option>
</select>

<div style="position:absolute;left:500;top:500">
<select onchange="alert(this.value)" id="sel4">
<option value="0"></option>
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
<option value="4">四</option>
<option value="5">五</option>
<option value="6">六</option>
<option value="7">七</option>
<option value="8">八</option>
<option value="9">九</option>
<option value="10">十</option>
<option value="11">十一</option>
<option value="12">十二</option>
<option value="13" selected>十三</option>
<option value="0"></option>
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
<option value="4">四</option>
<option value="5">五</option>
<option value="6">六</option>
<option value="7">七</option>
<option value="8">八</option>
<option value="9">九</option>
<option value="10">十</option>
<option value="11">十一</option>
<option value="12">十二</option>
<option value="0"></option>
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
<option value="4">四</option>
<option value="5">五</option>
<option value="6">六</option>
<option value="7">七</option>
<option value="8">八</option>
<option value="9">九</option>
<option value="10">十</option>
<option value="11">十一</option>
<option value="12">十二</option>
</select>
<input type="button" value="ok" onclick="alert($('#sel4').val())">
</div>

<select id="sel5" onchange="alert($(this).find('option:selected').text())">
<option>没有值1</option>
<option>没有值2</option>
<option>没有值3</option>
<option>没有值4</option>
</select>
<input type="button" value="ok" onclick="alert($('#sel5').find('option:selected').text())">
</body>
</html>