1判斷select選項中 是否存在Value="paraValue"的Item
2向select選項中 加入一個Item
3從select選項中 刪除一個Item
4刪除select中選中的項
5修改select選項中 value="paraValue"的text爲"paraText"
6設置select中text="paraText"的第一個Item爲選中
7設置select中value="paraValue"的Item爲選中
8得到select的當前選中項的value
9得到select的當前選中項的text
10得到select的當前選中項的Index
11清空select的項
// 1.判斷select選項中 是否存在Value="paraValue"的Item
function jsSelectIsExitItem(objSelect, objItemValue) {
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options.value == objItemValue) {
isExit = true;
break;
}
}
return isExit;
}
// 2.向select選項中 加入一個Item
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
//判斷是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
alert("該Item的Value值已經存在");
} else {
var varItem = new Option(objItemText, objItemValue);
objSelect.options.add(varItem);
alert("成功加入");
}
}
// 3.從select選項中 刪除一個Item
function jsRemoveItemFromSelect(objSelect, objItemValue) {
//判斷是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options.value == objItemValue) {
objSelect.options.remove(i);
break;
}
}
alert("成功刪除");
} else {
alert("該select中 不存在該項");
}
}
// 4.刪除select中選中的項
function jsRemoveSelectedItemFromSelect(objSelect) {
var length = objSelect.options.length - 1;
for(var i = length; i >= 0; i--){
if(objSelect.selected == true){
objSelect.options = null;
}
}
}
// 5.修改select選項中 value="paraValue"的text爲"paraText"
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {
//判斷是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options.value == objItemValue) {
objSelect.options.text = objItemText;
break;
}
}
alert("成功修改");
} else {
alert("該select中 不存在該項");
}
}
// 6.設置select中text="paraText"的第一個Item爲選中
function jsSelectItemByValue(objSelect, objItemText) {
//判斷是否存在
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options.text == objItemText) {
objSelect.options.selected = true;
isExit = true;
break;
}
}
//Show出結果
if (isExit) {
alert("成功選中");
} else {
alert("該select中 不存在該項");
}
}
// 7.設置select中value="paraValue"的Item爲選中
document.all.objSelect.value = objItemValue;
// 8.得到select的當前選中項的value
var currSelectValue = document.all.objSelect.value;
// 9.得到select的當前選中項的text
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;
// 10.得到select的當前選中項的Index
var currSelectIndex = document.all.objSelect.selectedIndex;
// 11.清空select的項
document.all.objSelect.options.length = 0;
Javascript操作select控件大全
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
用js進行日期與天數的加減
//用js進行日期與天數的加減 function addDate(date, days) { if (days == undefined || days == '') { days = 1; }
独自等待你
2020-06-28 15:49:52
ymPrompt.js消息提示組件 詳解 .
詳細說明: http://www.ajaxbbs.net/test/ymPrompt4.0/demo.html 1、在頁面中引入ymP
云哥中国
2020-06-19 05:43:15
javascript操作table(insertRow(),deleteRow(),insertCell(),deleteCel...
insertRow() 方法 定義和用法 insertRow() 方法用於在表格中的指定位置插入一個新行。 語法 tableObject.ins
brock
2020-06-16 13:34:03
js複製粘貼,clipboard.js
无知的小贼
2020-06-02 07:59:52
使用腳本拓展CPP應用程序之——JS腳本
键盘在跳舞
2020-05-24 00:25:07
my97datepicker日曆展示出現中文亂碼
暖暖的月光
2020-02-25 17:44:49
$.ajax type爲post時 contentType 設置爲 'application/json' 會有問題
暖暖的月光
2020-02-25 17:44:39
SpringMvc中ajax後臺可以收到請求,前臺依舊報錯
暖暖的月光
2020-02-25 17:44:38
artDialogV6 關閉彈窗
暖暖的月光
2020-02-25 17:44:38
Js 日期格式化 yyyy-MM-dd
暖暖的月光
2020-02-25 17:44:38
fancybox傳遞參數
暖暖的月光
2020-02-25 17:44:38