DOM之下拉select复习

最新推荐文章于 2022-08-11 20:54:18 发布
38度秋裤
最新推荐文章于 2022-08-11 20:54:18 发布
阅读量395
点赞数
本文链接：https://blog.csdn.net/u010452908/article/details/43317349
版权
平时开发涉及到前台页面很少,所以也很少关注这块,今天一个小问题,项目中一个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 οnclick="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.all
Document.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 οnclick="javascript:selectVal('itcompany','huawei');" value="选择"  name="btn"></button>
    </form>
  </body>
</html>