基于jquery的网页SELECT下拉框美化代码

1.解决了有些select 美化代码,无法触发原有select 控件的onchange 事件问题。
2.允许多次调用 $("...").selectCss(),以解决Select的options更新后无法同步的问题。

使用方法如下:


复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="selectCss.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="selectCss.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").selectCss();
});
</script>
</head>
<body>
<select name="" onchange="alert(this.value)" id="select1">
<option value="1" title="选项选项选项选项" >选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
<select name="" id="select2">
<option value="1">选项31</option>
<option value="2">选项32</option>
<option value="3">选33</option>
</select>
</body>
</html>

主要文件包括 selectCss.css 和 selectCss.js
selectCss.js 文件代码:


复制代码 代码如下:

(function($){
function hideOptions(speed){
if(speed.data){speed=speed.data}
if($(document).data("nowselectoptions"))
{
$($(document).data("nowselectoptions")).slideUp(speed);
$($(document).data("nowselectoptions")).prev("div").removeClass("tag_select_open");
$(document).data("nowselectoptions",null);
$(document).unbind("click",hideOptions);
$(document).unbind("keyup",hideOptionsOnEscKey);
}
}
function hideOptionsOnEscKey(e){
var myEvent = e || window.event;
var keyCode = myEvent.keyCode;
if(keyCode==27)hideOptions(e.data);
}
function showOptions(speed){
$(document).bind("click",speed,hideOptions);
$(document).bind("keyup",speed,hideOptionsOnEscKey);
$($(document).data("nowselectoptions")).slideDown(speed);
$($(document).data("nowselectoptions")).prev("div").addClass("tag_select_open");
}

$.fn.selectCss=function(_speed){
$(this).each(function(){
var speed=_speed||"fast";
if($(this).data("cssobj")){
$($(this).data("cssobj")).remove();
}
$(this).hide();
var divselect = $("<div></div>").insertAfter(this).addClass("tag_select");
$(this).data("cssobj",divselect);
var divoptions = $("<ul></ul>").insertAfter(divselect).addClass("tag_options").hide();
divselect.click(function(e){
if($($(document).data("nowselectoptions")).get(0) != $(this).next("ul").get(0)){
hideOptions(speed);
}
if(!$(this).next("ul").is(":visible"))
{
e.stopPropagation();
$(document).data("nowselectoptions",$(this).next("ul"));
showOptions(speed);
}
});
divselect.hover(function(){
$(this).addClass("tag_select_hover");
}
,
function(){
$(this).removeClass("tag_select_hover");
});
$(this).change(function(){
$(this).nextAll("ul").children("li:eq("+ $(this)[0].selectedIndex +")").addClass("open_selected").siblings().removeClass("open_selected");
$(this).next("div").html($(this).children("option:eq("+ $(this)[0].selectedIndex +")").text());
});
$(this).children("option").each(function(i){
var lioption= $("<li></li>").html($(this).text()).attr("title",$(this).attr("title")).appendTo(divoptions);
if($(this).attr("selected")){
lioption.addClass("open_selected");
divselect.html($(this).text());
}
lioption.data("option",this);
lioption.click(function(){
lioption.data("option").selected=true;
$(lioption.data("option")).trigger("change",true)
});
lioption.hover(
function(){$(this).addClass("open_hover");},
function(){ $(this).removeClass("open_hover"); }
);
});
});
}
})(jQuery);

selectCss.Css 文件代码:


复制代码 代码如下:

.tag_select{display:block;color:#000;width:179px;height:23px;background:transparent url("images/index_22.jpg") no-repeat 0 0;padding:0 10px;line-height:23px; color:#7D7D7D; font-size:12px; cursor:pointer}
.tag_select_hover{ color:#ff0000; background:transparent url("selectbg.jpg") no-repeat 0 0; }
.tag_select_open{ color:#0000ff; background:transparent url("selectbg.jpg") no-repeat 0 0;}
ul.tag_options{position:absolute;margin:0;list-style:none;background:#fff;padding:0 0 1px;margin:0;width:162px ; height:100px; overflow:hidden; overflow-y:auto; font-size:12px; margin-left:10px; cursor:pointer; z-index:1000 }
ul.tag_options li{background:#fff; display:block;width:140px;padding:0 10px;height:20px;text-decoration:none;line-height:20px;color:#000; font-weight:normal; font-size:12px}
ul.tag_options li.open_hover{background:#0000ff;color:#000; font-weight:normal; font-size:12px}
ul.tag_options li.open_selected{background:#ccc; font-size:12px;font-weight:bold; }

selectbg.jpg 图片:

时间: 2010-10-26

jquery及原生js获取select下拉框选中的值示例

现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 复制代码 代码如下: <select id="test" name=""> <option value="1">text1</option> <option value="2">text2</option> </select> 一:javas

jQuery自定义多选下拉框效果

项目中需要自定义一个下拉框多选插件,业务问题还是自己实现比较好 通过$.fn 向jQuery添加新的方法 下拉数据通过参数传递进去,通过调用该插件时接收,选择后的确定与取消事件采用事件传递方式 代码如下: 1.效果图 2.代码 <div id="demo" class="dropdown-container"> <div class="dropdown-display"> <span></span>

jQuery+easyui中的combobox实现下拉框特效

1.第一种写法:Input框中显示: 复制代码 代码如下: <input id="cc" class="easyui-combobox" name="name" data-options="valueField:'value',textField:'text',data:[{'value':'1','text':'java'},{'value':'2','text':'C#'}]"/> 2. 第二种用法,在list

基于jquery的无限级联下拉框js插件

灵活性方面考虑了比较多的方面,提供了几个重要的配置方便在各类环境下使用,欢迎各位童鞋使用,源码完全开放.开发这个插件的缘于前段时间维护一个4级级联下拉框被里面200行代码及复杂的结构和bug所郁闷(之所以这么多代码是因为该级联下拉框有时只出现2个或3个),想到这类的需求其实经常都能遇到,jquery里没有这样比较好的插件,索性自己开发个.源代码并不复杂,稍微复杂的地方在第二个插件使用了缓存,造成理解起来十分困难,后面会做些解释. 插件一:适合在不与服务器进行AJAX交互情况使用,需预先将所有下拉

jQuery操作select下拉框的text值和value值的方法

1.jquery获取当前选中select的text值 var checkText=$("#slc1").find("option:selected").text(); 2.jquery获取当前选中select的value值 var checkValue=$("#slc1").val(); 3.jquery获取当前选中select的索引值 var index=$("#slc1 ").get(0).selectedIndex; 4

利用jQuery实现可输入搜索文字的下拉框

先看效果   功能:点击下拉框输入框时,自动显示下面的下拉列表,而且是根据输入框中输入的搜索添加,自动在后台查找,然后传到前台,展现页面. 用的的js: 复制代码 代码如下: var $xialaSELECT; $(document).ready(function(){ initXialaSelect(); initSearch(); }); var temptimeout=null; var query=""; function searchDev(key){ //if(key ==

Jquery操作下拉框(DropDownList)实现取值赋值

1. 获取选中项: 复制代码 代码如下: 获取选中项的Value值: $('select#sel option:selected').val(); 或者 $('select#sel').find('option:selected').val(); 获取选中项的Text值: $('select#seloption:selected').text(); 或者 $('select#sel').find('option:selected').text(); 2. 获取当前选中项的索引值: 复制代码 代码

jquery获得下拉框值的代码

获取Select : 获取select 选中的 text : $("#ddlRegType").find("option:selected").text(); 获取select选中的 value: $("#ddlRegType ").val(); 获取select选中的索引: $("#ddlRegType ").get(0).selectedIndex; 设置select: 设置select 选中的索引: $("#d

jquery multiSelect 多选下拉框

$("#id").multiSelect({ oneOrMoreSelected: '*',selectAll:false,noneSelected:'默认显示' }); Usage: $('#id').multiSelect( options, callback ) Options: selectAll - whether or not to display the Select All option; true/false, default = true selectAllText

jquery动态加载select下拉框示例代码

如题,直接上代码,实战学习. 复制代码 代码如下: <head><title>jquery实现动态加载select下拉选项</title> <script type="text/javascript"> function init(){ makemoduleSelect(); } //加载模板下拉框选项 function makemoduleSelect(){ $.ajax({ url : 'indexStatisticsAction_g

jquery取消选择select下拉框示例代码

有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: 复制代码 代码如下: <select name="pWaqqqy" id="sel_type" onchange="selectFunction()">        <option value="">全部</option>   

JQuery异步加载无限下拉框级联功能实现示例

复制代码 代码如下: <pre code_snippet_id="193059" snippet_file_name="blog_20140218_1_1038704" name="code" class="javascript">/* JQuery异步加载无限极下拉框级联功能 zjy */ (function ($) { $.ajaxSetup({ async: false }); var url = "

Angularjs实现带查找筛选功能的select下拉框示例代码

前言 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!所以为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有这样的插件,但我们用的是Angularjs,更希望用双向绑定,指令的方式优雅地解决这个问题. 分析 我们的目标是在原来的<select ng-options="">标签上新加一个属性 select-search 就能支持查找的功能.如果这个属性没起作用,也不影响原来的select的功

iOS开发之UITableView与UISearchController实现搜索及上拉加载,下拉刷新实例代码

废话不多说了,直接给大家贴代码了. 具体代码如下所示: #import "ViewController.h" #import "TuanGouModel.h" #import "TuanGouTableViewCell.h" #define kDeviceWidth [UIScreen mainScreen].bounds.size.width #define kDeviceHeight [UIScreen mainScreen].bounds.

jQuery实现动态加载select下拉列表项功能示例

本文实例讲述了jQuery实现动态加载select下拉列表项功能.分享给大家供大家参考,具体如下: 需求说明: 以前使用的select下拉列表都是静态的,select 的option数据都是写死的.现在项目中的select需要根据不同的场景使用不同的数据,解决方式就是动态加载option数据. 代码部分: 下面步骤介绍了如何从数据库获取数据,并动态的在前端显示. 步骤一:jsp页面静态的select: <div> <select id="selectSM"> &

基于jquery实现的可编辑下拉框实现代码

原理就是一个textbox加一个ul模拟下拉框,用font模拟一个下拉按钮. 一.制作静态效果 先用css和html,做出一个应该有的样子.这里这两个我使用的是字体,可以在icomoon网站上面自己制作.用字体的好处是和输入框定位很方便,而且还可以控制大小颜色等,唯一的不足是IE6和IE7由于不支持:before选择器,导致无法显示这种字体,但可以通过一些其他方法实现,大家可以自己尝试下.下面是html代码 <span style="display:inline-block;positio

动态加载dtree.js树treeview(示例代码)

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Destroydrop » Javascripts » Tree</title><link rel="StyleSh

jQuery 获取和设置select下拉框的值实现代码

获取Select : 获取select 选中的 text : $("#ddlRegType").find("option:selected").text(); 获取select选中的 value: $("#ddlRegType ").val(); 获取select选中的索引: $("#ddlRegType ").get(0).selectedIndex; 设置select: 设置select 选中的索引: $("#d