<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery下拉框组件</title>
<style type="text/css">
body{font: 12px/1.231 "微软雅黑",Verdana,"宋体",sans-serif; }
.ui-select
{
display:inline-block;
font: 12px/1.231 "微软雅黑",Verdana,"宋体",sans-serif;
border:#bbb solid 1px;
border-radius: 3px;
background-image: -webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#efefef));
background-image: -moz-linear-gradient(top,#ffffff,#efefef);
background-image: -webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#efefef));
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#efefef);
cursor: pointer;
vertical-align: top;
zoom:1;
_height:25px;
}
.ui-select:hover{ box-shadow:#bbb 0px 0px 2px; }
.ui-select .default{line-height:20px; padding:2px 5px; overflow:hidden; display:block; zoom:1;}
.ui-select .default span{ float:left; }
.ui-select .default label{ font-size:10px; padding-left:3px; border-left:#bbb solid 1px; margin-left:6px; font-weight:700; float:right;}
.ui-select ul
{
margin:0;
padding:0;
list-style:none;
position:absolute;
display:block;
border:#bbb solid 1px;
margin-left:-1px;
line-height:22px;
border-bottom-right-radius: 3px 3px;
border-bottom-left-radius: 3px 3px;
text-align:left;
background:#fff;
display:none;
}
.ui-select li{ text-indent: 5px;}
.ui-select li:hover , .ui-select li.active{ background:#0bF; color:#fff;}
</style>
<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script>
/**
* 使用说明：
* 需要引人 ui-select.css
* 使用方法一：
* html：
* <select name="sex" >
* <option value="1">man</option>
* <option value="2">woman</option>
* </select>
* js：
* $('select').select();
*
* 使用方法二：从网络中加载数据
* $('select').select({url:'1.jsp'});
*
*/
(function($){
$.fn.select = function(options){
//定义常量
var settings = $.extend({},options);
this.each(function() {
//html template
var $html = $('<span class="ui-select"><span class="default"><label>▼</label><span></span></span><ul></ul></span>');
//将下拉框隐藏，把模版插入其后
var $this = $(this).hide().after($html);
//声明全局变量
var $list = $html.find('ul'),$default = $html.find('.default'),$span = $default.find('span'),$label = $default.find('label');
//从网络加载数据
if(settings.url){
$.ajax({
url: settings.url,
dataType:'json',
async : false,
success: function(data){
//得到已经存在的option个数
var size = $this.find('option').size();
$.each(data,function(i,option){
//由于ie6 的bug ，不得不采用原生的方式对DOM进行操作
$this[0].options[i+size] = new Option(option.text,option.value);
});
}
});
}
//将option遍历到li中
$this.find('option').each(function(){
var $option = $(this);
$('<li val="'+$option.val()+'">'+$option.text()+'</li>').appendTo($list);
if($option.prop('selected') === true){
$this.val($option.val());
$span.text($option.text());
}
});
//计算下拉框宽度
if($span.text() === ''){
var $li = $list.find('li').first();
$this.val($li.attr('val'));
$span.text($li.text());
}
$span.width($list.width());
//click 事件
$default.width($span.outerWidth()+$label.outerWidth(true)).click(function(event){
//阻止事件冒泡
event.stopPropagation();
if(!$list.find('li').size())
return ;
$list.slideToggle(200);
});
$html.width($default.outerWidth());
$list.width($default.outerWidth());
$list.find('li').click(function(){
var $li = $(this);
$span.text($li.text());
if($this.val() != $li.attr('val'))
$this.val($li.attr('val')).change();
}).hover(function(){
$(this).toggleClass('active');
});
$this.change(function(){
var index = $this[0].selectedIndex,$li = $list.find('li:eq('+index+')');
$span.text($li.text());
});
$(document).click(function(){
$list.slideUp(200);
});
});
return this;
};
})(jQuery);
$(function(){
$('select[name="sex"]').select();
$('select[name="ttt"]').select({url:'/1.jsp'}).change(function(){
alert(this.value);
});
});
</script>
</head>
<body>
<form action="?">
<select name="sex" >
<option value="1">man</option>
<option value="2">woman</option>
</select>
fdsafdsafds
<input type="submit" value="send"/>
<select name="ttt" id="ttt" >
<option value="t">测试</option>
<option value="5" selected>测试2</option>
</select>
</form>
</body>
</html>
分享到：
相关推荐
jQuery美化下拉框插件则允许开发者定制外观，包括字体、颜色、背景、边框等，使得下拉框与网页整体风格保持一致，提升页面美感。 该插件的核心特性是筛选功能，它允许用户在下拉框内输入关键词，快速过滤出匹配的...
jQuery下拉框美化插件正是为了解决这个问题而诞生的，它提供了五种不同的主题和方形设计，且每个选项都可配备图标，使得用户在交互时能获得更为直观和愉悦的感受。 该插件基于JavaScript库jQuery构建，jQuery是一个...
**jQuery美化下拉框插件介绍** 在网页开发中，原始的HTML `<select>` 下拉框样式往往显得单调，无法满足现代网页设计的美观需求。为此，开发者们使用JavaScript库，尤其是jQuery，来创建更精致、功能丰富的下拉框...
总结来说，"jQuery下拉框美化插件selectList"是提升网站用户体验的一个有效工具，它通过简单的API和丰富的定制选项，使开发者能够快速创建出美观且功能强大的下拉框组件。无论是个人项目还是企业级应用，selectList...
"带搜索框的jQuery美化下拉框"是一个针对这种需求的插件，它能够帮助开发者轻松实现具有搜索功能的下拉框，不仅提高了用户在选择选项时的效率，还提升了界面的整体美感。 首先，jQuery是一个强大的JavaScript库，它...
首先，让我们深入了解一下`jQuery`美化下拉框的概念。默认情况下，浏览器渲染的下拉框样式各不相同，缺乏统一性和美观性。`jQuery`插件可以通过替换DOM结构和应用自定义CSS来改变这种状况。它可能提供各种主题，使得...
之前我们分享过很多款非常漂亮而且实用的jQuery美化版Select下拉框插件，比如jQuery Select下拉框美化插件 菜单淡如淡出动画和漂亮实用的Select下拉框美化插件Tether都非常不错。今天我们要给大家介绍另一款基于...
"带搜索框的jQuery下拉框美化插件 searchableSelect"就是这样一个工具，它旨在为开发者提供一个既美观又实用的下拉选项选择器，同时集成了搜索功能，让用户在大量数据中快速找到目标。 jQuery是一个广泛使用的...
"带搜索框的jQuery下拉框美化插件"就是这样一款致力于优化网站表单元素的工具，它将传统的下拉框与搜索功能相结合，使得用户在面对大量选项时能够更加高效地找到所需信息。接下来，我们将深入探讨这款插件的工作原理...
在本文中，我们将深入探讨jQuery下拉框美化插件FancySpinBox，以及它如何通过增强交互性和视觉吸引力来提升网页表单的用户体验。FancySpinBox是一个专为改善标准HTML `<select>` 元素外观和功能而设计的JavaScript...
在本文中，我们将深入探讨"jQuery Select下拉框分类菜单多选插件"这一主题，它是一款用于增强标准HTML选择器功能的实用工具。这款插件不仅提供了分门别类的下拉菜单，还集成了搜索功能，使得用户在处理大量选项时...
但是今天我们要为大家分享一款基于jQuery的Select下拉框美化插件，它完全重写了浏览器默认的Select下拉框样式，而且在下拉菜单展开时还伴随淡如淡出的动画效果，非常不错。当然我们以前也分享过一些类似的插件，可以...
jQuery Select下拉框美化插件是专为解决这个问题而设计的，它能够将原本样式单一的Select元素转化为具有现代感、美观且交互友好的组件。这款插件基于jQuery库，结合CSS和JavaScript技术，可以轻松地与HTML5兼容，...
2. **CSS样式定制**：为了美化下拉框，开发者通常需要编写CSS样式来覆盖浏览器默认样式。这包括但不限于改变下拉按钮的背景色、边框、字体、大小等。此外，使用伪类如`:hover`, `:focus`可以实现鼠标悬停和获取焦点...
《jQuery Select下拉框样式美化插件详解及应用》 在网页设计中，下拉框（Select）作为常见的数据选择控件，其样式往往显得较为单一，无法满足设计师们追求美观与个性化的需求。jQuery，这个强大的JavaScript库，为...
在实际应用中，开发者可以通过引入jQuery库和jQuery UI库，然后加载这个插件的JavaScript和CSS文件，通过简单的配置和调用插件方法，即可实现下拉框的美化和功能增强。例如，可能需要设置插件的选项、绑定事件监听器...
jQuery下拉框美化插件DropKick是一款专门针对HTML原生下拉选择框（`<select>`元素）进行美化和功能增强的工具。它利用jQuery库的灵活性和强大的DOM操作能力，为开发者提供了一种简单易用的方式来提升网页交互体验，...
**jQuery select下拉框单选和多选插件** 在Web开发中，下拉框（select）是常用的一种用户交互元素，它用于提供多个选项供用户选择。然而，原生的HTML select元素在样式和交互性上往往显得较为单一。为了解决这个...
为了解决这个问题，开发者可以借助jQuery插件或自定义CSS和JavaScript来实现下拉框的美化。下面将详细介绍这个过程。 1. **jQuery Select Plugins**： - **Chosen**：Chosen是一个流行的jQuery插件，它提供了可...
引入js文件 [removed][removed] [removed][removed] [removed][removed] [removed][removed] [removed][removed]