廢話不多說了，直接給大家貼代碼，具體代碼如下所示：
<html><head> <title></title> <!--添加jquery--> <script src="../Script/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { createSelect("addSel"); addOption("addSel", "first", "第一個數據"); addOption("addSel", "secord", "第二個數據"); addOption("addSel", "three", "第三個數據"); addOption("addSel", "four", "第四個數據"); addOption("addSel", "fives", "第五個數據"); removeOneByIndex("addSel", 0); removeOneByValue("addSel", "three"); //****************以驗證不可以根據text值取得option元素*********************** //removeOneByText("addSel", "第三個數據"); //****************以驗證不可以根據text值取得option元素*********************** //removeAll("addSel"); //刪除select元素的所有options //removeSelect("addSel"); //刪除select元素； setDefaultByValue("addSel", "four"); //設置option的默認值 //添加一個option更改事件 調用自己寫的方法 $("#addSel").change(function () { alert("舊文本：" + getOptionText("addSel") + " 舊Value：" + getOptionValue("addSel")); editOptions("addSel", "新文本", "新Value"); //注意：不傳value值的時候 value值默認為text的值 alert("新文本：" + getOptionText("addSel") + " 新Value：" + getOptionValue("addSel")); }) }) //動態創建帶id的select function createSelect(id) { $("body").append("<select id="+id+"></select>"); } //根據select的id 添加選項option function addOption(selectID,value,text) { //根據id查找select對象， var obj = $("#" + selectID + ""); $("<option></option>").val(value).text(text).appendTo(obj); } //根據value的值設置options默認選中項 function setDefaultByValue(selectID,value) { var obj = $("#" + selectID + ""); obj.val(value); } //獲得選中的Option Value； function getOptionValue(selectID) { //var obj = $("#" + selectID + " option:selected").val(); //上面和下面兩種都可以 var obj = $("#" + selectID + "").find("option:selected").val(); return obj; } //獲得選中的option Text; function getOptionText(selectID) { //var obj = $("#" + selectID + " option:selected").text(); //上面和下面兩種都可以 var obj = $("#" + selectID + "").find("option:selected").text(); return obj; } //修改選中的option function editOptions(selectID, newText, newValue) { var obj = $("#" + selectID + "").find("option:selected"); obj.val(newValue).text(newText); } //根據 index 值刪除一個選項option function removeOneByIndex(selectID, index) { var obj = $("#" + selectID + " option[index=" + index + "]"); obj.remove(); } //根據 value值刪除一個選項option function removeOneByValue(selectID, text) { var obj = $("#" + selectID + " option[value=" + text + "]"); obj.remove(); } //****************以驗證不可以根據text值取得option元素*********************** //根據text值刪除一個選項option 感覺不可用 真的 //function removeOneByText(selectID, text) { //var obj = $("#" + selectID + " option[text=" + text + "]"); //obj.remove(); //} //****************以驗證不可以根據text值取得option元素*********************** //刪除所有選項option function removeAll(selectID) { var obj = $("#" + selectID + ""); obj.empty(); } //刪除select function removeSelect(selectID){ var obj = $("#" + selectID + ""); obj.remove(); } </script></head><body></body></html>以上所述是小編給大家分享的jquery操作select元素和option的實例代碼，希望對大家有所幫助。
新聞熱點
疑難解答
