`
ilovejsj
  • 浏览: 203562 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

巧用sel.options[sel.selectedIndex].text与try{}catch{e}{}操作SELECT选项值

阅读更多
  当select.value=value被赋予一个不存在的值时如果在这个时候用sel.options[sel.selectedIndex].text来获取当前选择文本会抛出异常。本文主要思想就是catch抛出的异常来断定select中不存在此value的选项,感觉这样做比循环获取每个option的value与新的value值比对是否相等更有效率,废话不多说,上菜!
<html>
<head>
<title>JS</title>
<script type="text/javascript">
function $(id)
{
	return document.getElementById(id);
}

String.prototype.trim=function()
{
	return this.replace(/(^\s*)|(\s*$)/g,"");
}
function init()
{
	var originalSel = $("originalSel");	
	originalSel.options[0]=new Option("text1","1");
	originalSel.options[1]=new Option("text2","2");
	originalSel.options[2]=new Option("text3","3");
	originalSel.options[3]=new Option("text4","4");
	originalSel.options[4]=new Option("text5","5");
}

function alertText(){
	var value = prompt('请您输入value值','');
	if(value==null||value.trim()=="")
	{
		return;
	}

	var originalSel = $("originalSel");
	originalSel.value=value;
	try{
		var text = originalSel.options[originalSel.selectedIndex].text;
		alert("value="+value+"对应的text是"+text);
	}catch(e){
		if(originalSel.options[0])
		{
			originalSel.options[0].selected=true;
		}
		alert("您输入的value不存在!");
	}	
}

function add()
{
	var textValue = prompt("请你输入Text,Value","text,value");
	if(textValue==null)
	{
		alert("请您输入text,value!");
		return;
	}
	var ary = textValue.split(",");
	if(ary.length<2||ary[0].trim()==""||ary[1].trim()=="")
	{
		alert("key,value值不能为空!");
		return;
	}
	var text = ary[0];
	var value = ary[1];
	var selObj = $("originalSel");
	selObj.value=value;
	try{
		selObj.options[selObj.selectedIndex].text;
		alert("select中已存在value为"+value+"的选项!");
		return;
	}catch(e){		
		selObj.options[selObj.options.length]=new Option(text,value);
		selObj.value=value;
		alert("增加成功!");
	}
}

function remove(){
	var value = prompt('请您输入value值','');
	if(value==null||value.trim()=="")
	{
		return;
	}
	var originalSel = $("originalSel");
	originalSel.value=value;
	try{
		originalSel.options[originalSel.selectedIndex].text;
		originalSel.remove(originalSel.selectedIndex);
		alert("删除成功!");
	}catch(e){
		if(originalSel.options[0])
		{
			originalSel.options[0].selected=true;
		}
		alert("select中不存在value="+value+"的选项!");
	}
}
</script>

</head>
<body onload="init()">
<select id="originalSel" style="width:150px">
</select>
<br>
<input type="button" onclick="alertText()" value="alertText">
<input type="button" onclick="add()" value="addOption">
<input type="button" onclick="remove()" value="removeOption">
</body>
</html>
分享到:
评论

相关推荐

    X-SEL V7.02.09.00

    IAI电缸编程软件X-SEL V7.02.09.00

    sel.log

    sel.log

    sel4.0.9.pdf

    《seL4内核参考手册》 4.0.9 中文 原文重要信息 1.2 第1章 简介 1.3 第2章 内核服务和对象 1.4 第2.1节 基于能力的访问控制 1.4.1 第2.2节 系统调用 1.4.2 第2.3节 内核对象 1.4.3 第2.4节 内核内存分配 1.4.4 2.4.1...

    IAI X-sel机械手软件,通讯,说明书

    IAI X-sel机械手软件,通讯,说明书 ,数据线驱动等

    SEL.zip_zip

    Sistema de ecuaciones lineales

    json2select.js 下载

    //构建如下json,t为列表框的text,v为列表框的value,s表示子一级对象 var ... * 则第一个select的name属性就是sel0,第二个就是sel1,接着sel2,sel3,sel...

    sel4.0.8.pdf

    seL4内核参考手册中文翻译,主要依据原版本11.0.0(2019年11月20日),对截止当前(2020年4月7日)的内核树少量变动也作了同步更新。在对照源码的基础上力求搬运地清楚准确。

    sel551-定值清单

    sel551-定值清单

    sel-551.pdf

    sel-551.pdf继电器特性,过流保护,重合闸......

    最新NIIT考试题目

    catch( ArithmeticException e ) { System.out.println("Catch "); } catch( Exception e ) { System.out.println("Will not be executed");} finally{ System.out.println("finally"); } } public static ...

    Sel.zip_CPolygon_in_lisp

    Direct WPolygon or CPolygon selection in AutoCad.

    sel.zip_i/o test

    fpga i/o 速率测试代码,含有testbench

    sel.rar_style_其他小程序

    An inverse Polish-style generation program

    SEL-E/G Programming Manual.pdf

    SEL-E/G Programming Manualpdf,SEL-E/G Programming Manual

    cpsw-phy-sel.rar_Texas_cpsw

    Texas Instruments Ethernet Switch Driver.

    cpsw-phy-sel.rar_Only_cpsw

    This only drives GPOs, and can t change direction.

    libaio-devel-0.3.107-10.SEL6.x86_64.rpm

    安装oracle11g是提示缺少包,安装libaio-devel-0.3.107-10.SEL6.x86_64.rpm后,再次检查不再提示。

    d-sel.github.io

    d-sel.github.io

    jquery动态添加option示例

    jquery动态添加option js动态添加option 代码如下:var sel= document.getElementById(“Selected1”... 代码如下:$(“#selectId”).append(“”+text+””); jquery移除所有option 代码如下:$(“#selectedId option

    [IEFireFox兼容]JS对select操作

    下面把他记下来,说不定以后还可以用用: 动态删除select中的所有options: function deleteAllOptions(sel){ sel.options.length=0; } 动态删除select中的某一项option: function deleteOption(sel,indx){ sel....

Global site tag (gtag.js) - Google Analytics