摘要:Html dom 是指在w3c规范出现之前,各个浏览器支持的一些dom操作。 1,Select对象。

脚本宝典收集整理的这篇文章主要介绍了

javascript代码实例教程-javascript中级联下拉列表

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

Html dom 是指在w3c规范出现之前,各个浏览器支持的一些dom操作。
1,Select对象。

 属性

  a,selectedIndex:用户选择的选项的下标,下标从0开始

  b,length:    获取或者设置选项的个数
  c,options:   返回一个数组数组元素是Option对象
 2,Options对象

 属性:

a,text:选项的文本内容

 b,value:选项的

 c,selected:  当该选项被选上,值为true,否则为false

 小知识:创建一个Option对象

[html]
var op=new Option(text,value); 

      var op=new Option(text,value);

我写的一个级联下拉列表:

 javascript代码实例教程-javascript中级联下拉列表-脚本宝典
 

代码如下:

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<style> 
#d1 { 
    width: 400px; 
    height: 250px; 
    background-color: #FFE4B5; 
    margin: 40px auto; 

#d1_head { 
    color: white; 
    font-size: 20px; 
    font-family: "Arial"; 
    height: 24px; 
    background-color: bule; 

#d1_content { 
    padding-left: 30px; 
    padding-top: 30px; 

</style> 
<script src="prototype-1.6.0.3.js"></script> 
<script type="text/javascript"> 
    function doAction(index) { 
        var arr = new Array
        arr[0] = [ new Option('--研究方向--', '-1') ]; 
        arr[1] = [ new Option('商务英语', 'english1'), 
                new Option('英美文学', 'english2') ]; 
        arr[2] = [ new Option('网格计算', 'computer1'), 
                new Option('计算机软件', 'computer2'), 
                new Option('图形计算', 'computer3') ]; 
        $('s2').innerHTML = ''; 
        for (i = 0; i < arr[index].length; i++) { 
            $('s2').options[i] = arr[index][i]; 
        } 
    } 
</script> 
</head> 
<body style="font-size:30px;"> 
    <p id="d1"> 
        <p id="d1_head">专业选择</p> 
        <p id="d1_content"> 
            <form> 
                <select naem="s1" id="s1" style="width:120px;" 
                    onchange="doAction(this.selectedIndex);"> 
                    <option value="-1">--专业--</option> 
                    <option value="english">--英语--</option> 
                    <option value="computer">--计算机--</option> 
                </select> <select name="s2" id="s2" style="width:120px;"> 
                    <option value="-1">--研究方向--</option> 
                </select> <input type="submit" value="确认" /> 
 
            </form> 
 
        </p> 
    </p> 
</body> 
</html> 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
#d1 {
 width: 400px;
 height: 250px;
 background-color: #FFE4B5;
 margin: 40px auto;
}
#d1_head {
 color: white;
 font-size: 20px;
 font-family: "Arial";
 height: 24px;
 background-color: bule;
}
#d1_content {
 padding-left: 30px;
 padding-top: 30px;
}
</style>
<script src="prototype-1.6.0.3.js"></script>
<script type="text/javascript">
 function doAction(index) {
  var arr = new Array;
  arr[0] = [ new Option('--研究方向--', '-1') ];
  arr[1] = [ new Option('商务英语', 'english1'),
    new Option('英美文学', 'english2') ];
  arr[2] = [ new Option('网格计算', 'computer1'),
    new Option('计算机软件', 'computer2'),
    new Option('图形计算', 'computer3') ];
  $('s2').innerHTML = '';
  for (i = 0; i < arr[index].length; i++) {
   $('s2').options[i] = arr[index][i];
  }
 }
</script>
</head>
<body style="font-size:30px;">
 <p id="d1">
  <p id="d1_head">专业选择</p>
  <p id="d1_content">
   <form>
    <select naem="s1" id="s1" style="width:120px;"
     onchange="doAction(this.selectedIndex);">
     <option value="-1">--专业--</option>
     <option value="english">--英语--</option>
     <option value="computer">--计算机--</option>
    </select> <select name="s2" id="s2" style="width:120px;">
     <option value="-1">--研究方向--</option>
    </select> <input type="submit" value="确认" />

   </form>

  </p>
 </p>
</body>
</html>

 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

javascript代码实例教程-javascript中级联下拉列表

全部内容,希望文章能够帮你解决

javascript代码实例教程-javascript中级联下拉列表

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过