对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 AX
function  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 > &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
< 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 >