SOURCE

 // 动态生成select小三角和显示值的div
 $('.hw-select').append('<div class="show-option"></div><i class="iconfont">&#xe619;</i>');
 // 动态生成selec option 选中的小图标
 $('.hw-select .option').append('<i class="iconfont">&#xe613;</i>');

 // 动态生成搜索icon
 $('.hw-search').append('<button class="search-btn"><i class="iconfont">&#xe6f4;</i></button>');

  // 动态生成搜索icon，但是点击不提交
 $('.hw-search-prevent').append('<div class="search-btn"><i class="iconfont">&#xe6f4;</i></div>');

 // 动态生成加减icon
 $('.hw-compute').append('<div class="add-btn">+</div><div class="subtract-btn">-</div>');

 // 动态生成时间icon
 $('.hw-time').append('<div class="search-btn"><i class="iconfont">&#xe64a;</i></div>');

 // 动态生成日期icon
 $('.hw-date').append('<div class="search-btn"><i class="iconfont">&#xe600;</i></div>');

 // 动态生成编辑icon
 $('.hw-edit').append('<div class="search-btn"><i class="iconfont">&#xe605;</i></div>');

 // 动态生成删除icon
 $('.hw-delete').append('<div class="search-btn"><i class="iconfont">&#xe65f;</i></div>');

/* 更多筛选条件 */
$('body').on('click', '.filter-switch', function() {
	$('.filter-detail').toggle();
});

// 已经筛选的状态
if ($('.filter-switch').data('status')) {
	$('.filter-switch').trigger('click');
}
 
// 重置
$('body').on('click', '#reset-filter-btn', function() {
	$(this).parents('.filter-detail').find('input').val('');
});

/*modal */
//显示modal
$('body').on('click', '[data-toggle="modal"]', function() {
	$($(this).data('target')).modal();
});
// 隐藏modal
$('body').on('click', '[data-dismiss="modal"], .modal-mask', function() {
	$('.modal').modal('hide');
});


// ie8不用插件(selectivizr.js)不兼容css3 :checked
// 默认选中的checkbox、radio
$.each($('.hw-checkbox input, .hw-radio input'), function() {
	if ($(this).prop('checked')) {
		$(this).parent().addClass('checked');
	}
});

// 多选
$('body').on('change', '.hw-checkbox input', function() {
	if ($(this).prop('checked')) {
		$(this).parent().addClass('checked');
	} else {
		$(this).parent().removeClass('checked');
	}
});
// 单选
$('body').on('change', '.hw-radio input', function() {
	var _this = $(this);
	$.each($('.hw-radio input'), function() {
		if ($(this).attr('name') == _this.attr('name')) {
			$(this).parent().removeClass('checked');
		}
	});
	_this.parent().addClass('checked');
});

//全选
var checkAll, checkOne;
if ($('.fixed-column').length) {
	checkAll = '.fixed-left .check-all';
	checkOne = '.fixed-left .check-one';
} else {
	checkAll = '.main-table-wrap .check-all';
	checkOne = '.main-table-wrap .check-one';
}

$('body').on('change', checkAll, function() {
	if ($(this).prop('checked')) {
		$(checkOne).each(function() {
			$(this).prop('checked', true);
			$(this).parent().addClass('checked');
		});
	} else {
		$(checkOne).each(function() {
			$(this).prop('checked', false);
			$(this).parent().removeClass('checked');
		});
	}
});

// 选中一条，判断是否全选
$('body').on('change', checkOne, function() {
  	var judge = true;
  	$(checkOne).each(function() {
    	if (!$(this).prop('checked')) {
	      	judge = false;
	      	return false;
	   	}
  	});
  	if (judge) {
    	$(checkAll).prop('checked', true);
    	$(checkAll).parent().addClass('checked');
  	} else {
    	$(checkAll).prop('checked', false);
    	$(checkAll).parent().removeClass('checked');
  	}
});



// 给hw-select默认赋值
$.each($('.hw-select'), function() {
	// 没有默认选中的值
	if (!$(this).find('.option.selected').length) {
		$(this).find('.option').eq(0).addClass('selected');
	}
	$(this).find('.show-option').text($(this).find('.option.selected span').text());
	$(this).find('input').val($(this).find('.option.selected').data('value'));
});

// select-options显示隐藏
$('body').on('click', '.hw-select', function(e) {
	var selectOptions = $(this).find('.select-options');
	if (selectOptions.css('display') == 'none') {
		selectOptions.slideDown();
		// 如果下拉菜单过长，出现滚动条
		if ($(this).find('.option').length >= 8) {
			selectOptions.css('overflow-y', 'scroll');
		}
	} else {
		selectOptions.slideUp();
	}
});
// 选择option（使用click事件，如果点击按住的时间过长，会造成blur时间先于click事件触发）
$('body').on('mousedown click', '.select-options .option', function() {
	$(this).siblings().removeClass('selected');
	$(this).addClass('selected');
	$(this).parent().siblings('input').val($(this).data('value'));
	$(this).parent().siblings('.show-option').text($(this).find('span').text());
});
// hw-select失去焦点， 隐藏slect-options
$('body').on('blur', '.hw-select', function() {
	var selectOptions = $(this).find('.select-options');
	selectOptions.slideUp();
});

// 设置新增页面表单的最小高度，css设置%无效
$('#main-form').css('min-height', $(window).height() - 125);


// hw-nav-tabs
// 默认显示第一个
$('.hw-tab-panes .tab-pane').eq(0).show();
$('body').on('click', '[data-toggle="tab"]', function() {
	$(this).siblings().removeClass('active');
	$(this).addClass('active');
	$('.hw-tab-panes .tab-pane').hide();
	$($(this).data('target')).show();
});


// hw-btn-group
$('body').on('click', '.hw-btn-group button', function() {
	$(this).siblings().removeClass('active');
	$(this).addClass('active');
});


// 加减
$('body').on('click', '.hw-compute .add-btn', function() {
	compute($(this), true);
});
$('body').on('click', '.hw-compute .subtract-btn', function() {
	compute($(this), false);
});
$('body').on('input', '.hw-compute input', function() {
	var curNum = Number($(this).val()),
		minNum = Number($(this).attr('min')),
		maxNum = Number($(this).attr('max'));
	if (curNum < minNum || curNum > maxNum) {
		$(this).val('');
	}
	$(this).siblings().removeClass('disabled');
});

function compute(e, add) {
	var inp = e.siblings('input'),
		curNum = Number(inp.val()),
		minNum = Number(inp.attr('min')),
		maxNum = Number(inp.attr('max')),
		step = inp.data('step');
		step = step ? step : 1;
	inp.addClass('active');
	if (add) {
		curNum += step;
		if (curNum == maxNum) {
			e.addClass('disabled');
		}
		if (curNum > maxNum) {
			e.addClass('disabled');
			inp.val(maxNum);
			return;
		}
		inp.val(curNum);
		e.siblings().removeClass('disabled');
	} else {
		curNum -= step;
		if (curNum == minNum) {
			e.addClass('disabled');
		}
		if (curNum < minNum) {
			e.addClass('disabled');
			inp.val(minNum);
			return;
		}
		inp.val(curNum);
		e.siblings().removeClass('disabled');
	}
}


// jquery实例扩展
$.fn.extend({
	modal: function(hide) {
		if (hide == 'hide') {
			$('body').css({'overflow': 'auto'});
			$('body, .modal').css({'padding-right': 0});
			$(this).fadeOut(function() {
				$('.confirm-modal').remove();
			});
			return;
		}
		$('body').css({'overflow': 'hidden'});
		// 有滚动条
		if ($(window).height() < $(document).height()) {
			$('body, .modal').css({'padding-right': '17px'});
		}
		$(this).fadeIn();
	}
});

// jqueryq全局扩展
$.extend({
	confirm: function(params, callback) {
		var confirmHtml = '<div class="modal hide confirm-modal">'+
							'<div class="modal-mask"></div>'+
							'<div class="modal-content">'+
								'<div class="modal-header">'+
									'<i class="iconfont" data-dismiss="modal">&#xe63d;</i>'+
									'<div class="modal-title">提示</div>'+
								'</div>'+
								'<div class="modal-body">'+
									params
								+'</div>'+
								'<div class="modal-footer">'+
									'<button type="button" class="hw-btn modal-confirm-btn" data-dismiss="modal">确定</button>'+
									'<button type="button" class="hw-btn hw-default-btn" data-dismiss="modal">取消</button>'+
								'</div>'+
							'</div>'+
						'</div>';
		$('body').append(confirmHtml);
		$('.confirm-modal').modal();
		$('body').on('click', '.modal-confirm-btn', function() {
			if (callback) {
				callback();
			}
		});
	},
	alert: function(params, time) {
		time = time || 1500;
		var alertHtml = '<div class="hw-alert">'+
							'<div class="hw-mask"></div>'+
							'<div class="hw-container">'+ params +'</div>'+
						'</div>';
		$('body').append(alertHtml);
		$('.hw-alert').fadeIn(function() {
			$('.hw-alert').fadeOut(time, function() {
				$('.hw-alert').remove();
			});
		});
	}
});


// 详情页查看大图
if ($('.hw-detail-imgs').length > 0) {
	$('body').append(
		'<div class="modal hide" id="detailImgModal">'+
            '<div class="modal-mask"></div>'+
            '<div class="modal-content">'+
                '<div class="modal-header">'+
                    '<i class="iconfont" data-dismiss="modal">&#xe63d;</i>'+
                    '<div class="modal-title">查看大图</div>'+
                '</div>'+
                '<div class="modal-body">'+
                    '<img class="preview-img" src="" alt="预览图片">'+
                '</div>'+
                '<div class="modal-footer">'+
                    '<button class="hw-btn" data-dismiss="modal">确定</button>'+
                '</div>'+
            '</div>'+
        '</div>');
	$('body').on('click', '.hw-detail-imgs img', function() {
		$('#detailImgModal').modal();
		$('#detailImgModal .preview-img').attr('src', $(this).attr('src'));
	});
} 

 

// modal
/*<div class="modal hide" id="imgModal">
	<div class="modal-mask"></div>
	<div class="modal-content">
		<div class="modal-header">
			<i class="iconfont" data-dismiss="modal">&#xe63d;</i>
			<div class="modal-title">Modal title</div>
		</div>
		<div class="modal-body">
			<img class="preview-img" src="" alt="预览图片">
		</div>
		<div class="modal-footer">
			<button class="hw-btn" data-dismiss="modal">确定</button>
			<button class="hw-btn hw-default-btn" data-dismiss="modal">取消</button>
		</div>
	</div>
</div>*/

<div class="hw-filter">
  <form action="">
      <div class="default-filter">
          <label class="hw-search">
              <input class="hw-input" type="text" placeholder="">
          </label>
          <div class="filter-switch" data-status="">更多筛选条件<i class="iconfont">&#xe619;</i></div>
      </div>
      <div class="filter-detail">
          <div class="filter-item">
              <div class="hw-input-label">
                  <div class="name">按行业</div>
                  <div class="form-control">
                      <label class="hw-select">
                          <input class="hw-input small-size" name="trade" type="text" value="<?if(isset($condition['trade'])){echo $condition['trade'];} else {echo 0;}?>" readonly unselectable="on">
                          <div class="select-options">
                              <div class="option " data-value="0"><span>请选择</span></div>
                              <div class="option " data-value="1"><span>教育培训</span></div>
                              <div class="option " data-value="2"><span>金融投资</span></div>
                              <div class="option " data-value="3"><span>IT服务</span></div>
                              <div class="option " data-value="4"><span>软件</span></div>
                              <div class="option " data-value="5"><span>医疗</span></div>
                          </div>
                      </label>
                  </div>
              </div>
              <div class="hw-input-label">
                  <div class="name">按企业规模</div>
                  <div class="form-control">
                      <label class="hw-select">
                          <input class="hw-input small-size" name="team_size" type="text" value="" readonly unselectable="on">
                          <div class="select-options">
                              <div class="option" data-value="0"><span>请选择</span></div>
                              <div class="option" data-value="1"><span>50人以下</span></div>
                              <div class="option" data-value="2"><span>50-100人</span></div>
                              <div class="option" data-value="3"><span>101-500人</span></div>
                              <div class="option" data-value="4"><span>501-1000人</span></div>
                              <div class="option" data-value="5"><span>1000人以上</span></div>
                          </div>
                      </label>
                  </div>
              </div>
              <div class="hw-input-label">
                  <div class="name">按企业性质</div>
                  <div class="form-control">
                      <label class="hw-select">
                          <input class="hw-input small-size" name="property" type="text" value="" readonly unselectable="on">
                          <div class="select-options">
                              <div class="option " data-value="0"><span>无</span></div>
                              <div class="option" data-value="1" ><span>国有企业</span></div>
                              <div class="option" data-value="3"><span>联营企业</span></div>
                              <div class="option " data-value="4"><span>私营</span></div>
                              <div class="option" data-value="5"><span>三资</span></div>
                              <div class="option" data-value="6"><span>其他企业</span></div>
                          </div>
                      </label>
                  </div>
              </div>
              <div class="hw-input-label">
                  <div class="name">按企业性质</div>
                  <div class="form-control">
                      <label class="hw-select">
                          <input class="hw-input small-size" name="property" type="text" value="" readonly unselectable="on">
                          <div class="select-options">
                              <div class="option " data-value="0"><span>无</span></div>
                              <div class="option" data-value="1" ><span>国有企业</span></div>
                              <div class="option" data-value="3"><span>联营企业</span></div>
                              <div class="option " data-value="4"><span>私营</span></div>
                              <div class="option" data-value="5"><span>三资</span></div>
                              <div class="option" data-value="6"><span>其他企业</span></div>
                          </div>
                      </label>
                  </div>
              </div>
              <div class="hw-input-label">
                  <div class="name">按企业性质</div>
                  <div class="form-control">
                      <label class="hw-select">
                          <input class="hw-input small-size" name="property" type="text" value="" readonly unselectable="on">
                          <div class="select-options">
                              <div class="option " data-value="0"><span>无</span></div>
                              <div class="option" data-value="1" ><span>国有企业</span></div>
                              <div class="option" data-value="3"><span>联营企业</span></div>
                              <div class="option " data-value="4"><span>私营</span></div>
                              <div class="option" data-value="5"><span>三资</span></div>
                              <div class="option" data-value="6"><span>其他企业</span></div>
                          </div>
                      </label>
                  </div>
              </div>
              <div class="operate-btns">
                  <button id="reset-filter-btn" class="hw-btn hw-default-btn" type="button"><i class="iconfont"></i>重置</button>
                  <button class="hw-btn"><i class="iconfont"></i>查询</button>
              </div>
          </div>
      </div>
  </form>
  </div>

html, body{
  background: #fff;
  padding-top: 30px;
}