jqSelect.js 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. //下拉框
  2. ;(function ($) {
  3. //下拉菜单默认参数
  4. var defaluts = {
  5. select: 'mp_select',
  6. select_text: 'mp_select_text',
  7. select_ul: 'mp_select_ul',
  8. }
  9. $.fn.extend({
  10. // 下拉菜单
  11. // 下拉菜单
  12. select: function (options) {
  13. var opts = $.extend({}, defaluts, options)
  14. return this.each(function () {
  15. var that = $(this)
  16. //模拟下拉列表
  17. if (that.data('value') !== undefined && that.data('value') !== '') {
  18. that.val(that.data('value'))
  19. }
  20. var _html = []
  21. _html.push('<div class="' + that.attr('class') + '">')
  22. _html.push('<div class="' + opts.select_text + '">' + that.find(':selected').text() + '</div>')
  23. _html.push('<ul class="' + opts.select_ul + '">')
  24. that.children('option').each(function () {
  25. var option = $(this)
  26. if (that.data('value') == option.val()) {
  27. _html.push('<li data-value="' + option.val() + '">' + option.text() + '</li>')
  28. } else {
  29. _html.push('<li data-value="' + option.val() + '">' + option.text() + '</li>')
  30. }
  31. })
  32. _html.push('</ul>')
  33. _html.push('</div>')
  34. var select = $(_html.join(''))
  35. var select_text = select.find('.' + opts.select_text)
  36. var select_ul = select.find('.' + opts.select_ul)
  37. that.after(select)
  38. that.hide()
  39. that.change(function () {
  40. var val = that.attr('data-value')
  41. that.children('option').each(function () {
  42. var option = $(this)
  43. if (val == option.val()) {
  44. select_text.text(option.text())
  45. }
  46. })
  47. })
  48. //下拉列表操作
  49. select.click(function (event) {
  50. $(this).toggleClass('mp_selected')
  51. $(this)
  52. .find('.' + opts.select_ul)
  53. .slideToggle()
  54. .end()
  55. .siblings('div.' + opts.select)
  56. .find('.' + opts.select_ul)
  57. .slideUp()
  58. event.stopPropagation()
  59. })
  60. $('body').click(function () {
  61. select_ul.slideUp()
  62. })
  63. select_ul.on('click', 'li', function () {
  64. var li = $(this)
  65. var val = li.addClass('selecton').siblings('li').removeClass('selecton').end().data('value').toString()
  66. if (val !== that.attr('data-value')) {
  67. select_text.text(li.text())
  68. that.attr('data-value', val)
  69. that.change()
  70. }
  71. })
  72. })
  73. },
  74. })
  75. })(jQuery)