首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >是否将select元素从jQuery 1.5.1升级到jQuery 1.9.1?

是否将select元素从jQuery 1.5.1升级到jQuery 1.9.1?
EN

Stack Overflow用户
提问于 2013-07-11 22:15:50
回答 1查看 539关注 0票数 0

我正在尝试使用使用jQuery 1.5.1制作的选择表单元素,但是我使用它的环境被设置为使用jQuery 1.9.1,并且我的选择框完全消失了。如何将此代码更改为使用1.9.1?

将链接的jQuery库版本号从1.5.1更改为1.9.1,以确切地理解我的意思。

小提琴:http://jsfiddle.net/BinaryAcid/6n2tn/1/笔:http://codepen.io/Justice-Conder/pen/uBIhy

代码语言:javascript
运行
复制
$(document).ready(function() {
var select = $('select.prettyfied');

var selectBoxContainer = $('<div>',{
width     : select.outerWidth(),
className : 'prettyfied-select',
html      : '<div class="prettyfied-select-box"><span></span></div>'
});

var dropDown = $('<ul>',{className:'dropDown'});
var selectBox = selectBoxContainer.find('.prettyfied-select-box');

// Looping though options of original select element
select.find('option').each(function(i) {
var option = $(this);
if(i == select.attr('selectedIndex')) {
  selectBox.html('<span>'+option.text()+'</span>');
}

// Access HTML5 data attributes with the data method
if(!option.data('html-text')) {
  return true;
}

// Create dropdown item according to data-icon & data-html-text attributes
var li = $('<li>',{
  html: '<span>' + option.data('html-text') + '</span>'
});

li.click(function() {
  selectBox.html('<span>'+option.text()+'</span>');
  dropDown.trigger('hide');

// When click occurs, we reflect change on original select element
  select.val(option.val());

  return false;
}).hover(function() {
  $(this).addClass('hover');
}, function() {
  $(this).removeClass('hover');
});

dropDown.append(li);
});

selectBoxContainer.append(dropDown.hide());
select.hide().after(selectBoxContainer);

// Binding custom show/hide events on dropDown
dropDown.bind('show',function(){
if(dropDown.is(':animated')){
  return false;
}
selectBox.addClass('expanded');
dropDown.slideDown();
}).bind('hide',function(){
if(dropDown.is(':animated')){
  return false;
}
selectBox.removeClass('expanded');
dropDown.addClass('is-hidden');
dropDown.slideUp(function() {
  dropDown.removeClass('is-hidden');
});
}).bind('toggle',function() {
if(selectBox.hasClass('expanded')) {
  dropDown.trigger('hide');
}
else dropDown.trigger('show');
});

selectBox.click(function() {
dropDown.trigger('toggle');
return false;
});

// Click on page, while the dropdown is shown, to close it
$(document).click(function(){
dropDown.trigger('hide');
});
});
EN

回答 1

Stack Overflow用户

发布于 2013-07-12 01:24:48

到目前为止我收到的最好的反馈:

  1. 在创建DOM对象时使用类而不是className。
  2. 在获取所选选项的索引时使用select.prop()而不是select.attr()。

谢谢你的帮助!

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/17595805

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档