`
ilovejsj
  • 浏览: 205643 次
  • 性别: 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>
分享到:
评论

相关推荐

    Html获取select元素的真实值和显示值.pdf

    通过`options[index]`我们可以访问到选定的`&lt;option&gt;`元素,然后使用`.value`获取其真实值,使用`.text`获取其显示值。 此外,还可以通过循环遍历所有`&lt;option&gt;`元素来获取它们的所有值和显示值: ```javascript ...

    X-SEL V7.02.09.00

    6. **兼容性与升级**:IAI电缸编程软件X-SEL V7.02.09.00与IAI全系列的电动缸产品兼容,确保用户在升级设备或扩展生产线时,软件仍能正常使用。此外,定期的软件更新保证了与新技术的同步,满足不断变化的工业需求。...

    js 动态新增改变删除select的值

    ### JavaScript 操作 Select 元素知识点详解 #### 标题:js 动态新增改变删除select的值 在网页开发中,`&lt;select&gt;`元素是非常常见的表单元素之一,用于提供下拉列表供用户选择。JavaScript 提供了丰富的 API 来...

    js动态改变select选择变更option的index值示例

    text: sel.options[sel.selectedIndex].text, index: sel.selectedIndex }; } ``` 在实际的Web开发中,这些操作会根据具体的业务需求进行调用和组合使用。在操作过程中,特别需要注意的是select选项删除的顺序...

    cpsw-phy-sel.rar_Texas_cpsw

    《Texas Instruments Ethernet Switch Driver——基于cpsw-phy-sel.c的深入解析》 在现代的嵌入式系统中,网络接口扮演着至关重要的角色。Texas Instruments(TI)作为一家知名的半导体公司,为开发者提供了丰富的...

    jQuery获取Select选择的Text和_Value

    jQuery 获取 Select 选择的 Text 和 Value 是一种常见的操作,例如在表单提交前获取用户选择的选项,或者在页面加载时根据服务器端的数据设置选择的选项。本文将详细介绍 jQuery 获取和设置 Select 选择的 Text 和 ...

    Sel.zip_CPolygon_in_lisp

    标题 "Sel.zip_CPolygon_in_lisp" 暗示了这是一个关于在AutoCAD中使用LISP语言实现CPolygon选择的功能。AutoCAD是一款广泛使用的计算机辅助设计(CAD)软件,主要用于二维绘图、详细设计和三维建模。LISP(列表处理...

    cpsw-phy-sel.rar_Only_cpsw

    标题中的“cpsw-phy-sel.rar_Only_cpsw”指的是一个压缩包文件,主要关注的是cpsw(Control Plane Switch)物理层选择相关的代码或配置。cpsw是TI(Texas Instruments)公司的一种以太网控制器,常用于嵌入式系统,...

    X-Sel编程软件

    1. **编程环境**:X-Sel提供了一个直观且用户友好的编程界面,支持多种编程语言,如顺序流程图(SFC)、指令表(Ladder Diagram)以及结构文本(Structured Text),以满足不同用户的需求和偏好。 2. **模拟与调试*...

    jquery获得select option值

    根据提供的文件信息,我们可以总结出一系列关于如何使用jQuery来获取不同类型的表单元素(如文本框、单选按钮、复选框以及下拉列表)的值的方法。下面将详细介绍这些方法及其应用场景。 ### 一、获取文本框(input ...

    sel.zip_i/o test

    I/O测试主要是检查设备与系统之间数据交换的能力和效率,这对于高性能的硬件系统来说尤其重要,因为高速I/O操作直接影响系统的整体性能。FPGA因其灵活性和可配置性,常被用作原型验证和定制化硬件解决方案的核心。在...

    易语言可直接调用驱动级鼠标键盘-sel插件0.92

    在易语言中,“直接调用驱动级鼠标键盘-sel插件0.92”是一个用于实现低级别硬件控制的工具,特别是针对鼠标和键盘操作。这个插件允许开发者通过易语言编写的应用程序直接与底层驱动进行交互,提供了对鼠标和键盘事件...

    sel.rar_style_其他小程序

    标题“sel.rar_style_其他小程序”暗示我们正在处理一个与编程相关的压缩文件,可能是某个小程序或工具的源代码。描述提到“An inverse Polish-style generation program”,这指的是逆波兰表示法(Reverse Polish ...

    sel.log

    sel.log

    sel551-定值清单

    SEL551 定值清单是 SEL 保护管理机与 DF3610 通讯管理机之间的通讯接口标准,用于实现保护现场工作流程的自动化管理。本文将详细介绍 SEL551 定值清单的组成结构、通讯协议、设置参数以及应用场景。 一、网络结构 ...

    js 操作select和option常用代码整理

    若要清空`select`的所有选项,可以获取`options`属性的`length`属性并设为0,如`obj.options.length = 0`。 4. **删除选中项** 获取选中项的索引`selectedIndex`,然后调用`remove`方法删除该选项,例如:`obj....

    JavaScript获取select中text值的方法

    在JavaScript中获取`&lt;select&gt;`元素选中项的文本值可以通过`this.options[this.selectedIndex].text`来实现。这在网页交互中非常常见,比如用于验证用户输入、展示提示信息或者根据用户选择执行相应操作。熟练掌握...

    JS获取下拉列表所选中的TEXT和Value的实现代码

    在JavaScript中,获取下拉列表(`&lt;select&gt;`元素)所选中的文本(`text`)和值(`value`)是一项常见的需求。这在网页交互中尤其有用,例如提交表单时获取用户的选择,或者根据用户的选择做出动态响应。在给出的示例...

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

    **IAI X-sel机械手软件** IAI(Institute of Advanced Intelligence)是一家知名的工业机器人制造商,其X-sel软件是专为控制IAI机械手而设计的高级编程工具。这款软件提供了直观的用户界面和丰富的功能,使得机械手...

Global site tag (gtag.js) - Google Analytics