对HTML控件select的option的操作(附全码)_AX
以前弄过一次,但没写blog,结果忘了,等想起来,,,等用到了再补上!!
下面介绍的是我昨天对select的操作:
前提:
以下拉框形式显示select,即size="1"(大多以这种形式使用,更符合实际)
取select的时候遇到了点问题,明天接着写.
生气了,,,,用了两个小时调试得下面这段代码服服帖帖的
从中有很多感悟,敬请期待下篇.:【JS调试的总结】
①select.options("id")方法取出一个option
②证明option的索引不能通过option.index来更改其索引值
③通过option的swapNode方法来交换索引
④选取一个Item
通过select的selectIndex来选中一个option
如果该Item有id,可以通过id值来选取该Item: options("hong")
【追加】
ListBox控件的HTML表现形式也为options,如果设置为多选模式.
⑤只能通过遍历来获得每个Item是否被选中,
即select的selectIndex属性是第一选中的Item的index.也可以遍历每个Item的selected属性.
⑥Item的内容的设置或提取方法有三种
options[i].text==options[i].innerText /options[i].innerHTML
【追加】过滤符合TextBox内容的Item,为TextBox添加onkeyup事件
//filter the ListBox's item,Made by AXfunction filter_AX()
{
//要选取的关键字(从第一个字符开始) var input = document.all(txtFilter).value.toUpperCase(); var inputlen = input.length; //lstComputers为ListBox类型 var len = document.all(lstComputers).options.length; var i; if (inputlen != 0)
{
//全部置为未选中状态 for(i = 0; i < len; i++) { if(document.all(lstFoundComputer).options(i).selected) { document.all(lstFoundComputer).options(i).selected = false;
} } for (i = 0; i < len; i++) { //value与text一致,所以使用value var strlistitem = document.all(lstComputers).options(i).value.toUpperCase(); if (strlistitem.substring(0,inputlen) == input) { document.all(lstFoundComputer).options(i).selected = true; //只选中一个符合关键字的Item break; } } } 
}
【全码】
<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"onchange="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>少帮主的斧头好久不饮血了!
