自定義select樣式控件

背景

該插件是爲了在不修改原有項目的基礎上通過自定義模板來修改select的樣式而設計。

簡述

因項目中有很多select下拉選擇框，爲了不影響其頁面結構，表單提交數據和原有js對select的修改，所以設計時採用保留原來的select標籤，並添加自定義的下拉選擇框樣式覆蓋select。

使用

該項不是基於jquery的，因此得先引入jquery：

<link rel="stylesheet" type="text/css" href="lx_select.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" ></script>
<script type="text/javascript" src="lx_select.js" ></script>

對應select設置id,並獲得節點，初始化之定義樣式：

<script>
$("#openBankName").Lx_SelectInit({
  width : 160,//下拉框固定寬度
  height : 35,//下拉框高度也是行高
  maxWidth : 300,//下拉框下拉選項最大寬度
  optionMinNum : 3,//下拉框下拉選項最小展示條數
  optionMaxNum : 8,//下拉框下拉選項最大展示條數
  zIndex:10 
});
</script>

如js改變select的狀態請觸發change事件：

$("#openBankName").find("option:eq(3)").prop("selected",true).change();//選中第三個選項
$("#openBankName").find("option:eq(4)").prop("disabled",true).change();//禁用第四個選項

以上就是這個插件的一些介紹和使用方法，初次分享自己的代碼，還存在很多問題。希望各位多多給予指正

github：https://github.com/myliuxia/lxSelect

demo效果圖如下：