multiSelect.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. layui.define("form", function(exports) {
  2. var MOD_NAME = "multiSelect",
  3. o = layui.jquery,
  4. form = layui.form,
  5. selected_vals = [],
  6. multiSelect = function() {};
  7. multiSelect.prototype.init = function() {
  8. var ts = this;
  9. o('select[multiple]').each(function(idx, item) {
  10. var t = o(this),
  11. selds = [];
  12. t.find('option:selected').each(function() {
  13. selds.push(o(this).val());
  14. })
  15. t.next().addClass('multi').find('.layui-select-title').click(function() {
  16. selected_vals[idx] && o(this).find('input').val(selected_vals[idx].join(','));
  17. }).next().find('dd').each(function() {
  18. var dt = o(this),
  19. checked = (dt.hasClass('layui-this') || o.inArray(dt.attr('lay-value'), selds) > -1) ? 'checked' : '',
  20. title = dt.text(),
  21. disabled = dt.attr('lay-value') === '' ? 'disabled' : '';
  22. dt.html('<input type="checkbox" lay-skin="primary" title="' + title + '" ' + checked + ' ' + disabled + '>');
  23. ts.selected(idx, t, dt);
  24. }).click(function(e) {
  25. var dt = o(this);
  26. // 点击下拉框每一行触发选中和反选
  27. if(e.target.localName == 'dd' && dt.attr('lay-value') !== '') {
  28. var status = dt.find('.layui-form-checkbox').toggleClass('layui-form-checked').hasClass('layui-form-checked');
  29. dt.find('input').prop('checked', status);
  30. }
  31. // 禁止下拉框收回
  32. dt.parents('.layui-form-select').addClass('layui-form-selected');
  33. ts.selected(idx, t, dt);
  34. });
  35. })
  36. form.render('checkbox');
  37. }
  38. multiSelect.prototype.selected = function(idx, t, dt) {
  39. // 选中值存入数组
  40. selected_vals[idx] = [];
  41. // 先清除真实下拉款选中的值,在下面循环中重新赋值选中
  42. t.find('option').prop('selected', false);
  43. dt.parents('dl').find('[type=checkbox]:checked').each(function() {
  44. var val = o(this).parent().attr('lay-value');
  45. t.find('option[value=' + val + ']').prop('selected', true);
  46. selected_vals[idx].push(o(this).attr('title'));
  47. })
  48. // 显示已选信息
  49. dt.parents('dl').prev().find('input').val(selected_vals[idx].join(','));
  50. }
  51. multiSelect.prototype.render = function(type, filter) {
  52. form.render(type, filter);
  53. this.init();
  54. }
  55. var i = new multiSelect();
  56. i.init();
  57. exports(MOD_NAME, i);
  58. });