javascript操作select参考代码_javascript技巧

来源：懂视网责编：小采时间：2020-11-27 20:39:16

javascript操作select参考代码_javascript技巧

javascript操作select参考代码_javascript技巧:1.判断select选项中是否存在Value=paraValue的Item function jsSelectIsExitItem(objSelect, objItemValue) { var isExit = false; for (var i = 0; i if (objSelect.options[i].value == objI

推荐度：

点击下载本文 文档为doc格式

导读javascript操作select参考代码_javascript技巧:1.判断select选项中是否存在Value=paraValue的Item function jsSelectIsExitItem(objSelect, objItemValue) { var isExit = false; for (var i = 0; i if (objSelect.options[i].value == objI

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值已经存在");
} 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.设置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出结果
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;

上面的是从网上搜集的，现在看看根据上面的内容做的
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>javascript select结合_脚本之家_www.gxlcms.com</title> <script language="javascript" type="text/javascript"> function vtOption(){ var s1=document.getElementById("select1"); var sV=s1.options[s1.selectedIndex].value; var sT=s1.options[s1.selectedIndex].text; alert(sV+"\n"+sT); } function addOption1(){ var s1=document.getElementById("select1"); var newOp1=new Option; newOp1.value="3"; newOp1.text="这是3"; var newOp2=new Option; newOp2.value="4"; newOp2.text="这是4"; s1.add(newOp1); s1.add(newOp2); } function addOption2(){ var s1=document.getElementById("select1"); for(var i=3;i<5;i++){ var newOp1=new Option("这是"+i,i); //var newOp1=new Option; //newOp1.value=i; //newOp1.text="这是"+i; s1.add(newOp1); } } function addOption3(){ var s1=document.getElementById("select1"); s1.options.length=0;//清除以前的选项 for(var i=3;i<7;i++){ var newOp1=new Option("这是"+i,i); //var newOp1=new Option; //newOp1.value=i; //newOp1.text="这是"+i; s1.add(newOp1); } } function remOption(){ var s1=document.getElementById("select1"); for(var i=s1.options.length;i>=0;i--){ s1.options.remove(i); } } function remOptionSelected(){ var s1=document.getElementById("select1"); var i=s1.selectedIndex; //alert(i); s1.options.remove(i); } </ script> </head> <body> <select name="select" id="select1"> <option value="1">这是1</option> <option value="2">这是2</option> </select> 取值增加1 增加2 增加3 删除选项删除选取选项 </body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

javascript操作select参考代码_javascript技巧

推荐度：

点击下载本文 文档为doc格式

标签：操作技巧 js

热门焦点

javascript操作select参考代码_javascript技巧

javascript操作select参考代码_javascript技巧

javascript操作select参考代码_javascript技巧

最新推荐

猜你喜欢

热门推荐