http://dl.dbank.com/c04csxtesr

基本用法 單選下拉框的寫法與傳統的一樣。支持TAB鍵打開和上下箭頭選擇option。支持onchange事件，見下面
選中項：2
代碼如下： <select onchange='selFunc()' id="sel"><option value="">請選擇功能</option><option value="1">新增圖片</option><option value="2">維護圖片</option><option value="3">新增新聞</option></select> selFunc函數代碼： function selFunc(){$("#selText").text($("#sel").val()) } 使用jQuery語法：$("#sel").val()或js語法：document.getElementById("sel").value均可得到所選值
要想獲得選中的option的文本，使用$("#sel").attr("relText")獲得relText屬性值即可。
注意onchange函數中不能傳遞this，例如使用selFunc(this)是無法通過this.value獲得值

下拉框不可用時效果：

代碼： <select disabled="true"><option value="">請選擇功能</option><option value="1">新增圖片</option><option value="2">維護圖片</option><option value="3">新增新聞</option> </select> 要動態設置下拉框是否可用見下面“動態修改下拉框”。 寬度設置 下拉框默認會有一個寬度，即使選項里面有很長的文字。如果想要下拉框的寬度適應最長選項的寬度，則設置select標簽的autoWidth="true"。效果如下：
<select autoWidth="true"><option value="0">請選擇功能</option><option value="新增圖片">很長的選項文字很長的選項文字</option><option value="維護圖片">維護圖片</option><option value="新增新聞">新增新聞</option></select> <select autoWidth="true"><option value="10">10</option><option value="20">20</option><option value="50">50</option><option value="100">100</option></select> 另外還可以通過style強制一個寬度，注意只有當 autoWidth="true"時有效
文本框：
下拉框： 文本框：<input type="text" style="width:350px;"/><br />下拉框：<select autoWidth="true" style="width:350px;"><option value="0">請選擇功能</option><option value="新增圖片">新增圖片</option><option value="維護圖片">維護圖片</option><option value="新增新聞">新增新聞</option></select> 下拉框分組 下拉框支持分組，效果如下：
代碼與普通select分組代碼一樣 <select><option>請選擇權限</option><optgroup label="首頁信息發布"><option value="新增圖片">新增圖片</option><option value="維護圖片">維護圖片</option><option value="新增新聞">新增新聞</option></optgroup><optgroup label="人員維護"><option value="新增用戶">新增用戶</option><option value="用戶列表">用戶列表</option></optgroup> </select> 下拉框可編輯 設置下拉框的editable="true"，就把它變成了一個可編輯的下拉框。見下面

下拉框會自動生成一個editValue屬性。通過這個屬性來獲得輸入或選擇的值，注意這時得到的值不是option的value而是顯示在下拉框中的字符。 <select editable="true" id="editSel" ><option value="">請輸入或選擇</option><option value="1">新增圖片</option><option value="2">維護圖片</option><option value="3">新增新聞</option></select><input type="button" value="獲取值" onclick="getSelValue()"/> getSelValue()函數代碼： function getSelValue(){var msg="";msg=$("#editSel").attr("editValue")if(msg==""||msg==undefined){msg="無輸入"}alert(msg); } 下拉框聯動 下拉框可以實現無限極ajax聯動。實現聯動步驟：
1、對父select設置childId，childId指定為想要聯動的下拉框。
2、對父select設置childDataPath，childDataPath為讀取數據的路徑。 下拉框會自動以”該路徑+選中option的value“拼出url來獲取數據。例如 childDataPath="http://192.168.31.30:8080/kj/trainplan.do?method="而某個option的value為bj1則當選擇該項時會自動讀取 http://192.168.31.30:8080/kj/trainplan.do?method=bj1來取得xml數據賦給子下拉框。
3、如果數據不是以url取得的而是從文件中取得，則需要設置childDataType屬性。 例如childDataPath="xmlData/"而childDataType="xml"則數據將從"xmlData/bj1.xml"取得。如果是從txt文件取得則childDataType="txt"
4、使用jQuery語法：$("#sel").val()或js語法：document.getElementById("sel").value可得到所選值，使用$("#sel").attr("relText")可得到選中option的文本。 舉例如下：
二級聯動:IE瀏覽器想觀看效果請將本頁面放在服務器目錄下通過http地址訪問
所學專業： ?? 所屬班級：
代碼如下： 所學專業： <select id="sxzy" childId="ssbj" childDataPath="xmlData/" childDataType="xml"><option value="">請選擇專業</option><option value="bj1">專業1</option><option value="bj2">專業2</option><option value="bj0">大數據測試</option></select>??所屬班級：<select id="ssbj"><option value="0">請先選擇專業</option></select> <input type="button" value="獲取選中值" onclick="getOptValue1()"/> 如上代碼所示，有父與子兩個select，設置父select的childId為子的id名，并設置childDataPath和childDataType。
因為本例使用的是xml文件，所以childDataType="xml"。實際使用時如果是從action或jsp中讀取的，則不用寫childDataType或childDataType="url"
注意：不需要聯動的選項要將option的value設為空，例如本例的”請選擇專業“選項。 不可以不寫value否則系統會默認設置為option的文本值。
子下拉框讀取的XML數據格式如下： <?xml version="1.0" encoding="UTF-8"?> <root><node value="bj1" text="班級1"/><node value="bj2" text="班級2"/> </root> 其中頭部一定要有，encoding值根據所屬工程的編碼而定。如果工程是GBK編碼，則頭部應encoding="GBK" 取得所選擇值的函數getOptValue1代碼如下： function getOptValue1(){var msg="";msg="value:"+$("#sxzy").val()+","+$("#ssbj").val()+"<br/>"+"文本："+$("#sxzy").attr("relText")+","+$("#ssbj").attr("relText")alert(msg); } 再看一個三級聯動例子：IE瀏覽器想觀看效果請將本頁面放在服務器目錄下通過http地址訪問
學院： ?? 專業： ?? 班級：
代碼如下 學院： <select id="xy" childId="zy" childDataPath="xmlData/" childDataType="xml"><option value="">請選擇學院</option><option value="zy1">學院1</option><option value="zy2">學院2</option> </select>?? 專業： <select id="zy" childId="bj" childDataPath="xmlData/" childDataType="xml"><option value="">請先選擇學院</option> </select>??班級： <select id="bj"><option value="">請先選擇專業</option> </select> <input type="button" value="獲取選中值" onclick="getOptValue2()"/> 每次選擇學院時，只要option的value不為空就會通過ajax讀取數據賦給選擇專業的下拉框。路徑分別為"xmlData/zy1.xml"和"xmlData/zy2.xml"。 zy1.xml的數據如下： <?xml version="1.0" encoding="UTF-8"?> <root><node value="" text="請選擇專業"/><node value="bj1" text="專業1"/><node value="bj2" text="專業2"/><node value="bj3" text="專業3"/> </root> 每次選擇專業時，只要option的value不為空就會通過ajax讀取數據賦給選擇班級的下拉框。路徑分別為"xmlData/"下的bj1.xml——bj6.xml。 bj1.xml的數據如下： <?xml version="1.0" encoding="UTF-8"?> <root><node value="01" text="班級1"/><node value="02" text="班級2"/> </root> 獲取所選值函數代碼： function getOptValue2(){var msg="";msg="value:"+$("#xy").val()+","+$("#zy").val()+","+$("#bj").val()+"<br/>"+"文本："+$("#xy").attr("relText")+","+$("#zy").attr("relText")+","+$("#bj").attr("relText")alert(msg); } 這里要注意的是，每次取的XML數據最好都加一條“請選擇XX”的node節點（最后一個select的數據除外）并將value設為空。如 <root><node value="" text="請選擇專業"/><node value="zy1" text="專業1"/><node value="zy2" text="專業2"/><node value="zy3" text="專業3"/> </root> 因為如果不加這一項，第二級select默認會聯動到“專業1”，而第三級卻不會自動聯動到“專業1”所對應的班級。
所以第二級加上value=""的選項，這樣第三級不自動聯動也不會有問題。這時再選擇第二級就會觸發聯動實現第三極加載。
而第三級是最后一級所以不必加value=""的選項，直接關聯到第一項“班級1”即可。

更多級聯動的下拉框也是上面的思路，請自行嘗試。 自定義列數 當下拉框項目過多時，可以對select設置colNum來指定列數，并且設置colWidth指定每列寬度。效果如下：
代碼如下： <select colNum="3" colWidth="90"><option>北京市</option><option>天津市</option><option>河北省</option><option>山西省</option><option>內蒙古自治區</option><option>遼寧省</option><option>吉林省</option><option>黑龍江省</option><option>上海市</option><option>江蘇省</option><option>浙江省</option><option>安徽省</option><option>福建省</option><option>江西省</option><option>山東省</option><option>湖南省</option><option>湖北省</option><option>河南省</option><option>廣東省</option><option>廣西壯族自治區</option><option>海南省</option><option>重慶市</option><option>四川省</option><option>貴州省</option><option>云南省</option><option>西藏自治區</option><option>陜西省</option><option>甘肅省</option><option>青海省</option><option>寧夏回族自治區</option><option>新疆維吾爾自治區</option><option>香港特別行政區</option><option>澳門特別行政區</option><option>臺灣省</option><option>其他</option> </select> 如果不指定列寬，則每列會以最大項目的寬為列寬。效果如下：
代碼如下： <select colNum="3"><option>北京市</option><option>天津市</option><option>河北省</option><option>山西省</option><option>內蒙古自治區</option><option>遼寧省</option><option>吉林省</option><option>黑龍江省</option><option>上海市</option><option>江蘇省</option><option>浙江省</option><option>安徽省</option><option>福建省</option><option>江西省</option><option>山東省</option><option>湖南省</option><option>湖北省</option><option>河南省</option><option>廣東省</option><option>廣西壯族自治區</option><option>海南省</option><option>重慶市</option><option>四川省</option><option>貴州省</option><option>云南省</option><option>西藏自治區</option><option>陜西省</option><option>甘肅省</option><option>青海省</option><option>寧夏回族自治區</option><option>新疆維吾爾自治區</option><option>香港特別行政區</option><option>澳門特別行政區</option><option>臺灣省</option><option>其他</option> </select> 動態創建下拉框 與普通動態添加dom節點的方法一樣，不同的是要在添加完畢的最后對其調用selectbox()方法來動態渲染。

代碼： <input type="button" value="點擊生成下拉框" id="testBtn"/> JS代碼 $(function(){$("#testBtn").click(function(){var $selbox=$('<select><option value="0">請選擇功能</option><option value="1">新增圖片</option><option value="2">維護圖片</option></select>')$(this).after($selbox)//將下拉框加到按鈕的后面$selbox.selectbox();//渲染下拉框}) }) 能夠調用selectbox()方法的必須是一個jQuery節點對象。如果是普通的dom對象，需要用$(xxx)來轉成jQuery節點對象。 動態修改下拉框 和修改普通下拉框的做法一樣，不同的是需要在最后調用selRefresh(下拉框ID)來更新顯示。

代碼如下： <select id="sel2"><option value="0">請選擇功能</option><option value="1">新增圖片</option><option value="2">維護圖片</option><option value="3">新增新聞</option> </select> <input type="button" value="選中第2項" onclick="changeItem()"/> <input type="button" value="新增1項" onclick="addItem()"/> <input type="button" value="刪除1項" onclick="removeItem()"/> <input type="button" value="設為不可用" onclick="disableSelect()"/> <input type="button" value="設為可用" onclick="enableSelect()"/> 函數如下： function changeItem(){$("#sel2").val(2);selRefresh("sel2"); } var idx=3 function addItem(){idx++var sel=$("#sel2")[0];sel.options[sel.options.length] = new Option("新增項", idx);$("#sel2").val(idx);selRefresh("sel2"); } function removeItem(){var sel=$("#sel2")[0];sel.options.length--;idx--$("#sel2").val(idx);selRefresh("sel2"); } function disableSelect(){$("#sel2").attr("disabled",true);selRefresh("sel2"); } function enableSelect(){$("#sel2").attr("disabled",false);selRefresh("sel2"); } 另外selRefresh()中的參數也可以是下拉框的jQuery節點對象。 恢復系統默認 如果希望使用系統默認的下拉框，則使用class <select class="default"><option value="1">新增圖片</option><option value="2">維護圖片</option><option value="3">新增新聞</option></select>

轉載于:https://www.cnblogs.com/haiwei_sun/articles/2595772.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的select下拉框美化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。