DOM之下拉select复习

来源：互联网发布：windows网络上有重名编辑：程序博客网时间：2024/06/04 17:58
平时开发涉及到前台页面很少,所以也很少关注这块,今天一个小问题,项目中一个select绑定一个动态数据字典,这个数据字典没有空值,但是在第一次跳到这个页面的时候,是不带任何查询条件的,所以,要给这个select一个空值并在一次跳到该页面,空值被选中,init()方法如下:function init(){   document.queryFrm.requesttype.options[document.queryFrm.requesttype.options.length] = new Option('','');document.queryFrm.requesttype.options[document.queryFrm.requesttype.options.length-1].selected = true; document.queryFrm.handleid.options[document.queryFrm.handleid.options.length] = new Option('','');  document.queryFrm.handleid.options[document.queryFrm.handleid.options.length-1].selected = true; document.all.queryFrm.submit();}<html>  <head>   <script type="text/javascript">     function selectVal(id, value)     {        // DOM 相关的属性, DOM对象        // var opts = document.forms[1].itcompany.options;          var opts = document.getElementById(id).options;                   for (var i = 0; i < opts.length; i++)         {            var tempVal = opts[i].value;                         if (value == tempVal)            {              // DOM->select->selected属性              opts[i].selected = true;            }         }     }         </script>  </head>    <body>     <!-- <form action="fake.action"> -->    <select name="itcompany" id="itcompany">       <option value="all">所有</option>       <option value="huawei">华为</option>       <option value="zhongxing">中兴</option>       <option value="tenxun">腾讯</option>       <option value="alibaba">阿里巴巴</option>       <option value="xiaomi">小米</option>    </select>    <button onclick="javascript:selectVal('itcompany','huawei');" value="选择"  name="btn"></button>    <!-- </form> -->  </body></html>其实在页面中获取一个DOM对象是很方便的,引用《DOM编程的艺术》简单地说,DOM 是一套对文档的内容进行抽象的概念化的方法:在现实世界中,人们对笔者称之为"世界对象模型"里的许多事务都有一个共同的理解,例如,当用"汽车""房子" 和 "树"等名词来称呼日常生活环境里的事物时,我们几乎可以百分之百的肯定对方知道我们在说什么,而这时因为人们对这些名词所代表的具体事物都有这同样的认识,于是,当对别人说,"汽车停在车库里"时, 可以相当有把握地假设他们不会把这句话理解为"小鸟被关在壁橱里".我们的"世界对象模型"不仅可以用来描述客观存在的事物,还可以用来描述各种抽象概念.这个道理对网页也同样适用,javascript 的早期版本向程序员提供了对web文档的某些实际内容进行查询和操控的手段,主要是表单和图像,因为"图像" 和 "表单"等名词是程序员都明白的概念,javascript也预先定义了images 和forms 等关键字,我们才能像下面这样在javascript脚本中引用,"文档中的第三个图片" 或 "文档中文名为 ‘details’" 的表单document.images[2];document.forms['details']另复习下:Document.allDocument.all[]是文档中所有标签组成的一个数组变量,包括了文档对象中所有元素     function selectVal()    {       // 通过name 两种访问方式:       var it = document.all.it.value;       var it2 = document.all['it'].value;       alert(it + ":" + it2);               // 通过id 的两种访问格式       var tencent = document.all.cent.value;       var tencent2 = document.all['cent'].value;         alert(tencent + ":" + tencent2);                 var zhongxin = document.getElementById("zhongxin").value;       var zhongxin2 = document.all.zhongxin.value;       alert(zhongxin + ":" + zhongxin2);               // http://localhost:8080/sendEmail/gogogogog.action         alert(document.forms[0].action);                // 记住一些常用的DOM对象属性和方法      // select ->options.selected,length      // checkbox ->checked = false|true;          document.all["ok1"].checked = true;      // form -> submit(),action属性       // input,button,checkbox --> value属性  // var processResp = document.getElementById("processResp" + id.substr(8));      // var processRespId = document.getElementById("processResp"+id.substr(8)+"id");      // processResp.disabled = false;      // processRespButton.disabled = false;        // Dom 对象属性方法      /*         var orgOptions = document.getElementById("org");         op.value = res[0];         op.text = res[1];         orgOptions.add(op);         button -> disabled | name | type | value         form target -> _blank | _self | _parent | _top | framename         div -> style.display  | style.background         <a href="http://" target="_blank">XXX</a>          <form name="queryFrm" id="queryFrm" method="post" validate="true"         target="resultPage" action="packageName/yourActionName">         <iframe name="resultPage" width="100%" height="60%" frameborder="no" scrolling="no"></iframe>         setTimeout(code,millisec)         setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式         setTimeout() 只执行 code 一次,如果要多次调用,请使用 setInterval()或者让 code 自身再次调用setTimeout()         */        }   </script>  </head>    <body>    <form id="queryFrm" action=" ">    <input type="checkbox" name="ok1" value="switch">     <input type="checkbox" name="ok2" value="switch">     <input type="checkbox" name="ok3" value="switch">       <input type="text" name="it" value="it">    <input type="text" name="zhongxin2" value="zhongxin" id="zhongxin">    <input type="text" name="tencent" id="cent" value="tencent">    <button onclick="javascript:selectVal('itcompany','huawei');" value="选择"  name="btn"></button>    </form>  </body></html>
0 0