selectbox学习笔记

 

< html >
     < head >
         < title > limited textarea </ title >
         < script type = " text/javascript " >
         var  TextUtil  =   new  Object();
        TextUtil.isNotMax = function (oTextArea)
         ... {
            return oTextArea.value.length !=oTextArea.getAttribute("maxlength");
        }
         // 禁止粘贴  οnpaste="return false"

         // select box,HTML DOM为每个<select/>元素定义了options集合，她是控件的所有的
         // <option/>元素的列表，要获取,option的显示的文本与值
         function  testSelect()
         ... {
            var test = document.getElementById("testSelect");
            alert(test.options[0].value);
            alert(test.options[0].getAttribute("value"));
            alert(test.options[0].firstChild.nodeValue);
            alert(test.options[0].text);
            alert(test.options[0].index);
            alert(test.options[0].selected);
            test.options[0].firstChild.nodeValue ="zhang xiong";
        }
         // 添加　一个option选项．
         function  appendOption()
         ... {
            var test = document.getElementById("testSelect");
            var appOption = document.createElement("option");
            appOption.setAttribute("value","4");
            appOption.appendChild(document.createTextNode("tina shi"));
            test.appendChild(appOption);
        }

         // 删除一个选项
         function  deleteOption()
         ... {
            var test = document.getElementById("testSelect");
            test.options[0]=null;
            test.remove(0);
            //两种删除选项的方式
        }
         </ script >
     </ head >
     < body onload = " deleteOption() " >
       < textarea rows = " 10 "  cols = " 120 "  maxlength = " 50 "  onkeypress = " return TextUtil.isNotMax(this) " >
       </ textarea >

       < select id = " testSelect " >
             < option value = " 1 " > fangzhiyong </ option >
             < option value = " 2 " > wanglei </ option >
             < option value = " 3 " > kong kai ping </ option >
       </ select >
     </ body >
</ html >