下拉列表_的值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function $(id){
    return document.getElementById(id);
}
function del(wen1){
    var wen2 = $("wen2");
    wen2.options.length = 0;
    for(var i = 0; i < wen1.options.length; i++){
        if(!wen1.options[i].selected){
            wen2.options.add(new Option(wen1.options[i].innerHTML, wen1.options[i].value));
        }
    }
}
window.onload = function(){
    del($("wen1"));
};
</script>
<style type="text/css">
<!--
.STYLE1 {color: #FF0000}
-->
</style>
</head><body>
<p>
  列表1：
    <select name="wen1" id="wen1" onchange="del(this)">
    <option value="0">A</option>
    <option value="1">B</option>
    <option value="2">C</option>
    <option value="3">D</option>
<option value="4">E</option>
    <option value="5">F</option>
  </select>
列表2：
<select name="wen2" id="wen2">
    <option value="0">A</option>
    <option value="1">B</option>
    <option value="2">C</option>
    <option value="3">D</option>
<option value="4">E</option>
    <option value="5">F</option>
</select>
<p>现在我有两个下拉列表，<span class="STYLE1">列表1</span>和<span class="STYLE1">列表2</span>。
<p>目前我实现了，选择<span class="STYLE1">列表1</span>的值的时候<span class="STYLE1">列表2</span>里相同的值被移除。
<p>现在我想要实现，当我选择<span class="STYLE1">列表1</span>的值的时候<span class="STYLE1">列表2</span>里相同的值被移除，而且<span class="STYLE1">相同的值以上的值同样被移除</span>。
<p>如：当<span class="STYLE1">列表1</span>我选择<span class="STYLE1">C</span>，那么<span class="STYLE1">列表2</span>里面就值能有<span class="STYLE1">D、E、F</span>，<span class="STYLE1">A\B\C</span>就被移除掉。</body>
</html>
看代码。谢谢。

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript">
    function $(id){
        return document.getElementById(id);
    }
    function del(wen1){
        var wen2 = $("wen2");
        wen2.options.length = 0;
        for(var i = wen1.selectedIndex; i < wen1.options.length; i++){
            if(!wen1.options[i].selected){
                wen2.options.add(new Option(wen1.options[i].innerHTML, wen1.options[i].value));
            }
        }
    }
    window.onload = function(){
        del($("wen1"));
    };
    </script>
    <style type="text/css">
    <!--
    .STYLE1 {color: #FF0000}
    -->
    </style>
    </head><body>
    <p>
      列表1：
        <select name="wen1" id="wen1" onchange="del(this)">
        <option value="0">A</option>
        <option value="1">B</option>
        <option value="2">C</option>
        <option value="3">D</option>
        <option value="4">E</option>
        <option value="5">F</option>
      </select>
    列表2：
    <select name="wen2" id="wen2">
        <option value="0">A</option>
        <option value="1">B</option>
        <option value="2">C</option>
        <option value="3">D</option>
        <option value="4">E</option>
        <option value="5">F</option>
    </select>
    <p>现在我有两个下拉列表，<span class="STYLE1">列表1</span>和<span class="STYLE1">列表2</span>。
    <p>目前我实现了，选择<span class="STYLE1">列表1</span>的值的时候<span class="STYLE1">列表2</span>里相同的值被移除。
    <p>现在我想要实现，当我选择<span class="STYLE1">列表1</span>的值的时候<span class="STYLE1">列表2</span>里相同的值被移除，而且<span class="STYLE1">相同的值以上的值同样被移除</span>。
    <p>如：当<span class="STYLE1">列表1</span>我选择<span class="STYLE1">C</span>，那么<span class="STYLE1">列表2</span>里面就值能有<span class="STYLE1">D、E、F</span>，<span class="STYLE1">A\B\C</span>就被移除掉。</body>
    </html>
      

  2.   

    将for(var i = 0; i < wen1.options.length; i++)改成for(var i = wen1.selectedIndex; i < wen1.options.length; i++)
      

  3.   

    当列表1我选择C，那么列表2里面就值能有【D、E、F】，【A、B、C】就被移除掉。
      

  4.   

    确定没变化？？？我手头就IE6，测试了没问题啊
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript">
    function $(id){
        return document.getElementById(id);
    }
    function del(wen1){
        var wen2 = $("wen2");
        wen2.options.length = 0;
        //for(var i = 0; i < wen1.options.length; i++)这是原来的
        for(var i = wen1.selectedIndex; i < wen1.options.length; i++)
        {
            if(!wen1.options[i].selected){
                wen2.options.add(new Option(wen1.options[i].innerHTML, wen1.options[i].value));
            }
        }
    }
    window.onload = function(){
        del($("wen1"));
    };
    </script>
    <style type="text/css">
    <!--
    .STYLE1 {color: #FF0000}
    -->
    </style>
    </head><body>
    <p>
      列表1：
        <select name="wen1" id="wen1" onchange="del(this)">
        <option value="0">A</option>
        <option value="1">B</option>
        <option value="2">C</option>
        <option value="3">D</option>
        <option value="4">E</option>
        <option value="5">F</option>
      </select>
    列表2：
    <select name="wen2" id="wen2">
        <option value="0">A</option>
        <option value="1">B</option>
        <option value="2">C</option>
        <option value="3">D</option>
        <option value="4">E</option>
        <option value="5">F</option>
    </select>
    <p>现在我有两个下拉列表，<span class="STYLE1">列表1</span>和<span class="STYLE1">列表2</span>。
    <p>目前我实现了，选择<span class="STYLE1">列表1</span>的值的时候<span class="STYLE1">列表2</span>里相同的值被移除。
    <p>现在我想要实现，当我选择<span class="STYLE1">列表1</span>的值的时候<span class="STYLE1">列表2</span>里相同的值被移除，而且<span class="STYLE1">相同的值以上的值同样被移除</span>。
    <p>如：当<span class="STYLE1">列表1</span>我选择<span class="STYLE1">C</span>，那么<span class="STYLE1">列表2</span>里面就值能有<span class="STYLE1">D、E、F</span>，<span class="STYLE1">A\B\C</span>就被移除掉。</body>
    </html>
      

  5.   

    1.先判断IE8下onchange事件有没有被触发
    2.触发了再判断selectedIndex有没有值
    LZ去试一试吧
      

  6.   


    第二点呢？？？获取selectedIndex的值很重要
      

  7.   


    不用客气。
    不过LZ是怎么解决的？？因为手头没IE8不好测试，请LZ说说最后的解决方法，这也是经验啊，谢谢