JQuery（14）
项目中需要在点击按钮时动态生成select元素，为防止每次点击按钮时从服务器端获取数据(因为数据都是相同的),可以这样写代码
1、首先定义全局js变量
var strVoucherGroupSelect =&&;
2、在js中写好获取服务端数据的代码
genVoucherGroupSelect(rowID){
$(strVoucherGroupSelect).attr(&id&,
&sl_& + rowID).parent().html();&
getVoucherGroupData(){
&&$.ajax({
&/BillWeb/OrgVoucher/GetVoucherGroup&,
&&&&dataType:
&&&&cache:
&&&&success:
function(res) {
&&&&&&&&var
str = $(&&select&&/select&&);
&&&&&&&&var
option = &&;
&&&&&&&&for(var
j =0;j & res. j++)
&&&&&&&&&&option +=
&&option value=\&& + res[j].Value +
&\&&& + res[j].Text +
&&/option&&;
&&&&&&&&strVoucherGroupSelect = $(str).html(option).parent().html();
3 在页面中编写初始化代码
$().ready(function(){
&&&&getVoucherGroupData();
4 需要动态增加select的时候，可以这样写
$(&#divID&).append(genVoucherGroupSelect(rowID) );
5 给select增加点击事件，在第四步后增加
+ rowID).bind(&change&,
function(){
&&&alert(&你点击了下拉框&);
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：125782次
积分：2497
积分：2497
排名：第14111名
原创：24篇
转载：670篇
(6)(9)(35)(30)(49)(25)(7)(11)(41)(36)(16)(24)(60)(30)(44)(35)(91)(29)(123)(16)21:05 提问
怎么给select的option加onclick事件
select里面有一个change，但是对我现在有个需求是需要select里面option选项然后去生成什么，但是change有点麻烦，就是默认显示的第一个就是我想要的，这是总要点击其他再切换回来才能激发change事件，我想问option有没有类似click事件，这样我就可以直接点击选取了，不知道大家有没有明白我的用意，或者有其他做法都可以跟我说下，谢谢大家了~~
按赞数排序
一定要用select元素吗？如果觉得不好控制可以用,然后控制li的单击事件就行了呀！如果一定要使用select，直接监听一下select的onchange事件，根据不同的值去做相应的生成就可以了。也不见得很麻烦嘛！【路过，发表一下我自己的看法，不喜勿喷】
给select加onclik不行吗
自己做一个和select长得一样的元素就好了，这样比较灵活各种事件都支持。
^_^呵呵，解决了就好。其实，像你说的那种情况，第一个就是你想要选择的项，那生成的内容加载的时候就给个初始化就可以了呢。
其他相似问题>> jquery.searchableSelect.js
jquery.searchableSelect.js ( 文件浏览 )
// Author: David Qin
// E-mail:
(function($){
// a case insensitive jQuery :contains selector
$.expr[&:&].searchableSelectContains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) &= 0;
$.searchableSelect = function(element, options) {
this.element =
this.options = options || {
this.init();
var _this =
this.searchableElement.click(function(event){
// event.stopPropagation();
_this.show();
}).on('keydown', function(event){
if (event.which === 13 || event.which === 40 || event.which == 38){
event.preventDefault();
_this.show();
$(document).on('click', null, function(event){
if(_this.searchableElement.has($(event.target)).length === 0)
_this.hide();
this.input.on('keydown', function(event){
event.stopPropagation();
if(event.which === 13){
event.preventDefault();
_this.selectCurrentHoverItem();
_this.hide();
} else if (event.which == 27) {
_this.hide();
} else if (event.which == 40) {
_this.hoverNextItem();
} else if (event.which == 38) {
_this.hoverPreviousItem();
}).on('keyup', function(event){
if(event.which != 13 && event.which != 27 && event.which != 38 && event.which != 40)
_this.filter();
var $sS = $.searchableS
$sS.fn = $sS.prototype = {
version: '0.0.1'
$sS.fn.extend = $sS.extend = $.
$sS.fn.extend({
init: function(){
var _this =
this.element.hide();
this.searchableElement = $('&div tabindex=&0& class=&searchable-select&&&/div&');
this.holder = $('&div class=&searchable-select-holder&&&/div&');
this.dropdown = $('&div class=&searchable-select-dropdown searchable-select-hide&&&/div&');
this.input = $('&input type=&text& class=&searchable-select-input& /&');
this.items = $('&div class=&searchable-select-items&&&/div&');
this.caret = $('&span class=&searchable-select-caret&&&/span&');
this.scrollPart = $('&div class=&searchable-scroll&&&/div&');
this.hasPrivious = $('&div class=&searchable-has-privious&&...&/div&');
this.hasNext = $('&div class=&searchable-has-next&&...&/div&');
this.hasNext.on('mouseenter', function(){
_this.hasNextTimer =
var f = function(){
var scrollTop = _this.items.scrollTop();
_this.items.scrollTop(scrollTop + 20);
_this.hasNextTimer = setTimeout(f, 50);
}).on('mouseleave', function(event) {
clearTimeout(_this.hasNextTimer);
this.hasPrivious.on('mouseenter', function(){
_this.hasPriviousTimer =
var f = function(){
var scrollTop = _this.items.scrollTop();
_this.items.scrollTop(scrollTop - 20);
_this.hasPriviousTimer = setTimeout(f, 50);
}).on('mouseleave', function(event) {
clearTimeout(_this.hasPriviousTimer);
this.dropdown.append(this.input);
this.dropdown.append(this.scrollPart);
this.scrollPart.append(this.hasPrivious);
this.scrollPart.append(this.items);
this.scrollPart.append(this.hasNext);
this.searchableElement.append(this.caret);
this.searchableElement.append(this.holder);
this.searchableElement.append(this.dropdown);
this.element.after(this.searchableElement);
this.buildItems();
this.setPriviousAndNextVisibility();
filter: function(){
var text = this.input.val();
this.items.find('.searchable-select-item').addClass('searchable-select-hide');
this.items.find('.searchable-select-item:searchableSelectContains('+text+')').removeClass('searchable-select-hide');
if(this.currentSelectedItem.hasClass('searchable-select-hide') && this.items.find('.searchable-select-item:not(.searchable-select-hide)').length & 0){
this.hoverFirstNotHideItem();
this.setPriviousAndNextVisibility();
hoverFirstNotHideItem: function(){
this.hoverItem(this.items.find('.searchable-select-item:not(.searchable-select-hide)').first());
selectCurrentHoverItem: function(){
if(!this.currentHoverItem.hasClass('searchable-select-hide'))
this.selectItem(this.currentHoverItem);
hoverPreviousItem: function(){
if(!this.hasCurrentHoverItem())
this.hoverFirstNotHideItem();
var prevItem = this.currentHoverItem.prevAll('.searchable-select-item:not(.searchable-select-hide):first')
if(prevItem.length & 0)
this.hoverItem(prevItem);
hoverNextItem: function(){
if(!this.hasCurrentHoverItem())
this.hoverFirstNotHideItem();
var nextItem = this.currentHoverItem.nextAll('.searchable-select-item:not(.searchable-select-hide):first')
if(nextItem.length & 0)
this.hoverItem(nextItem);
buildItems: function(){
var _this =
this.element.find('option').each(function(){
var item = $('&div class=&searchable-select-item& data-value=&'+$(this).attr('value')+'&&'+$(this).text()+'&/div&');
if(this.selected){
_this.selectItem(item);
_this.hoverItem(item);
item.on('mouseenter', function(){
$(this).addClass('hover');
}).on('mouseleave', function(){
$(this).removeClass('hover');
}).click(function(event){
event.stopPropagation();
_this.selectItem($(this));
_this.hide();
_this.items.append(item);
this.items.on('scroll', function(){
_this.setPriviousAndNextVisibility();
show: function(){
this.dropdown.removeClass('searchable-select-hide');
this.input.focus();
this.status = 'show';
this.setPriviousAndNextVisibility();
hide: function(){
if(!(this.status === 'show'))
if(this.items.find(':not(.searchable-select-hide)').length === 0)
this.input.val('');
this.dropdown.addClass('searchable-select-hide');
this.searchableElement.trigger('focus');
this.status = 'hide';
hasCurrentSelectedItem: function(){
return this.currentSelectedItem && this.currentSelectedItem.length & 0;
selectItem: function(item){
if(this.hasCurrentSelectedItem())
this.currentSelectedItem.removeClass('selected');
this.currentSelectedItem =
item.addClass('selected');
this.hoverItem(item);
this.holder.text(item.text());
var value = item.data('value');
this.holder.data('value', value);
this.element.val(value);
if(this.options.afterSelectItem){
this.options.afterSelectItem.apply(this);
hasCurrentHoverItem: function(){
return this.currentHoverItem && this.currentHoverItem.length & 0;
hoverItem: function(item){
if(this.hasCurrentHoverItem())
this.currentHoverItem.removeClass('hover');
if(item.outerHeight() + item.position().top & this.items.height())
this.items.scrollTop(this.items.scrollTop() + item.outerHeight() + item.position().top - this.items.height());
else if(item.position().top & 0)
this.items.scrollTop(this.items.scrollTop() + item.position().top);
this.currentHoverItem =
item.addClass('hover');
setPriviousAndNextVisibility: function(){
if(this.items.scrollTop() === 0){
this.hasPrivious.addClass('searchable-select-hide');
this.scrollPart.removeClass('has-privious');
this.hasPrivious.removeClass('searchable-select-hide');
this.scrollPart.addClass('has-privious');
if(this.items.scrollTop() + this.items.innerHeight() &= this.items[0].scrollHeight){
this.hasNext.addClass('searchable-select-hide');
this.scrollPart.removeClass('has-next');
this.hasNext.removeClass('searchable-select-hide');
this.scrollPart.addClass('has-next');
$.fn.searchableSelect = function(options){
this.each(function(){
var sS = new $sS($(this), options);
})(jQuery);
展开＞ ＜收缩
下载源码到电脑，阅读使用更方便
还剩0行未阅读，继续阅读 ▼
Sponsored links
源码文件列表
温馨提示： 点击源码文件名可预览文件内容哦 ^_^
1.71 kB 11:09
93.54 kB 17:34
2.40 kB 11:09
8.63 kB 11:10
Sponsored links
评价成功，多谢！
jquery.searchableSelect.zip
CodeForge积分（原CF币）全新升级，功能更强大，使用更便捷，不仅可以用来下载海量源代码马上还可兑换精美小礼品了
您的积分不足
支付宝优惠套餐快速获取 30 积分
10积分 / ￥100
30积分 / ￥200原价 ￥300 元
100积分 / ￥500原价 ￥1000 元
订单支付完成后，积分将自动加入到您的账号。以下是优惠期的人民币价格，优惠期过后将恢复美元价格。
支付宝支付宝付款
微信钱包微信付款
更多付款方式：、
您本次下载所消耗的积分将转交上传作者。
同一源码，30天内重复下载，只扣除一次积分。
鲁ICP备号-3 runtime:Elapsed:50.854ms 27.69
登录 CodeForge
还没有CodeForge账号？
Switch to the English version?
^_^"呃 ...
Sorry!这位大神很神秘，未开通博客呢，请浏览一下其他的吧