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

最新推荐文章于 2022-11-24 16:37:30 发布

iteye_16184

最新推荐文章于 2022-11-24 16:37:30 发布

阅读量443

点赞数

分类专栏： JavaScript 文章标签： prototype HTML

JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

当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>