对HTML控件select的option的操作(附全码)_AX

最新推荐文章于 2021-06-05 00:57:32 发布

步人甲

最新推荐文章于 2021-06-05 00:57:32 发布

阅读量4.2k

点赞数

文章标签： html javascript function button div input

以前弄过一次,但没写blog,结果忘了,等想起来,,,等用到了再补上!!
下面介绍的是我昨天对select的操作:
前提:
以下拉框形式显示select,即size="1"(大多以这种形式使用,更符合实际)

取select的时候遇到了点问题,明天接着写.
生气了,,,,用了两个小时调试得下面这段代码服服帖帖的
从中有很多感悟,敬请期待下篇.:【JS调试的总结】

①select.options("id")方法取出一个option

②证明option的索引不能通过option.index来更改其索引值

③通过option的swapNode方法来交换索引

④通过select的selectIndex来选中一个option

【全码】
<head>
<script>
<!--
function Start()
{

//让【洪】作为第一项先显示,看我怎么获取该option
//这种需求应该很多,但在网上我还没搜到过
//注意:有多个id为洪,将返回一个option集合
//id/name不能为汉字,刚才调了半天才找出原因的
var source=document.form1.selTest.options("hong");
alert("把【"+source.innerHTML+"】换到最上面");

//交换位置
source.swapNode(document.form1.selTest.options(0));
//用[]也可以,Why?
source.swapNode(document.form1.selTest.options[0]);
//日的,还以为没交换成功,原来是选中项没改变,我们让它选中
document.form1.selTest.selectedIndex=0;
//注:该方法主要是给一个字符串,把与字符串相同的项放到第几个位置.
//刚刚想到可以这样获取该项:
//document.getElementById("hong").innerHTML;
}
function AX()
{
//获取div以便进行显示
var show=document.getElementById("show");
var tempIndex=document.form1.selTest.selectedIndex;
show.innerHTML="选中项的索引:"+document.form1.selTest.selectedIndex+"<br>";
show.innerHTML+="刚刚选中项的值:(直接取,最简单)"+document.form1.selTest.value+"<br>";
show.innerHTML+="刚刚选中项的值:"+document.form1.selTest.options(tempIndex).value+"<br>";
show.innerHTML+="刚刚选中项的显示部分(通过索引来,很麻烦):"+document.form1.selTest.options(tempIndex).innerHTML;
show.innerHTML+="刚刚选中项的显示部分(通过索引来,后面是text也可以,Why?):"+document.form1.selTest.options(tempIndex).text;
}
-->
</script>
</head>
<BODY>
<FORM name="form1">
<div id="show"></div>          
<SELECT name="selTest"
οnchange="javascript:AX();">
<OPTION VALUE="AX0">张</option>
<OPTION id="hong" VALUE="AX1">洪</option>
<OPTION VALUE="AX2">志</option>
</SELECT>
<input value="改变option的顺序" type="button" onClick="javascript:Start();">
</FORM>
</BODY>