javascript操作select參考代碼
更新時間:2008年06月01日 20:17:56 作者:
用js控制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[i].value == objItemValue) {
isExit = true;
break;
}
}
return isExit;
}
2.向select選項中 加入一個Item
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
//判斷是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
alert("該Item的Value值已經(jīng)存在");
} 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[i].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[i].selected == true){
objSelect.options[i] = 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[i].value == objItemValue) {
objSelect.options[i].text = objItemText;
break;
}
}
alert("成功修改");
} else {
alert("該select中 不存在該項");
}
}
6.設(shè)置select中text="paraText"的第一個Item為選中
function jsSelectItemByValue(objSelect, objItemText) {
//判斷是否存在
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].text == objItemText) {
objSelect.options[i].selected = true;
isExit = true;
break;
}
}
//Show出結(jié)果
if (isExit) {
alert("成功選中");
} else {
alert("該select中 不存在該項");
}
}
7.設(shè)置select中value="paraValue"的Item為選中
document.all.objSelect.value = objItemValue;
8.得到select的當(dāng)前選中項的value
var currSelectValue = document.all.objSelect.value;
9.得到select的當(dāng)前選中項的text
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;
10.得到select的當(dāng)前選中項的Index
var currSelectIndex = document.all.objSelect.selectedIndex;
11.清空select的項
document.all.objSelect.options.length = 0;
上面的是從網(wǎng)上搜集的,現(xiàn)在看看根據(jù)上面的內(nèi)容做的
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
function jsSelectIsExitItem(objSelect, objItemValue) {
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
isExit = true;
break;
}
}
return isExit;
}
2.向select選項中 加入一個Item
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
//判斷是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
alert("該Item的Value值已經(jīng)存在");
} 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[i].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[i].selected == true){
objSelect.options[i] = 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[i].value == objItemValue) {
objSelect.options[i].text = objItemText;
break;
}
}
alert("成功修改");
} else {
alert("該select中 不存在該項");
}
}
6.設(shè)置select中text="paraText"的第一個Item為選中
function jsSelectItemByValue(objSelect, objItemText) {
//判斷是否存在
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].text == objItemText) {
objSelect.options[i].selected = true;
isExit = true;
break;
}
}
//Show出結(jié)果
if (isExit) {
alert("成功選中");
} else {
alert("該select中 不存在該項");
}
}
7.設(shè)置select中value="paraValue"的Item為選中
document.all.objSelect.value = objItemValue;
8.得到select的當(dāng)前選中項的value
var currSelectValue = document.all.objSelect.value;
9.得到select的當(dāng)前選中項的text
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;
10.得到select的當(dāng)前選中項的Index
var currSelectIndex = document.all.objSelect.selectedIndex;
11.清空select的項
document.all.objSelect.options.length = 0;
上面的是從網(wǎng)上搜集的,現(xiàn)在看看根據(jù)上面的內(nèi)容做的
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
您可能感興趣的文章:
- angularjs 實現(xiàn)帶查找篩選功能的select下拉框?qū)嵗?/a>
- Angularjs實現(xiàn)帶查找篩選功能的select下拉框示例代碼
- AngularJS基礎(chǔ) ng-selected 指令簡單示例
- AngularJS入門教程之Select(選擇框)詳解
- Js操作Select大全(取值、設(shè)置選中等等)
- javascript Select標(biāo)記中options操作方法集合
- JS組件Bootstrap Select2使用方法詳解
- js 觸發(fā)select onchange事件代碼
- jquery及原生js獲取select下拉框選中的值示例
- AngularJS Select(選擇框)使用詳解
相關(guān)文章
js傳遞數(shù)組參數(shù)到后臺controller的方法
下面小編就為大家分享一篇js傳遞數(shù)組參數(shù)到后臺controller的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
HTML中Select不用Disabled實現(xiàn)ReadOnly的效果
Disabled ReadOnly之家的聯(lián)系2008-04-04
innerHTML動態(tài)添加html代碼和腳本兼容多個瀏覽器
innerHTML動態(tài)添加html代碼和腳本,給某個元素的innerHTML賦值,并使得值中的js代碼有效且兼容多個瀏覽器,很棒的一個方法2014-10-10
JavaScript學(xué)習(xí)筆記之DOM基礎(chǔ)操作實例小結(jié)
這篇文章主要介紹了JavaScript學(xué)習(xí)筆記之DOM基礎(chǔ)操作,結(jié)合實例形式總結(jié)分析了javascript針對dom元素節(jié)點、屬性的相關(guān)獲取、設(shè)置等操作技巧,需要的朋友可以參考下2019-01-01

