两个select之间进行相应的交互

原创 于 2006-08-04 11:24:00 发布 · 1.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#div #function #button #input #server #table

本文介绍了一个使用 ASP.NET 和 JavaScript 实现的页面，该页面包含三个不同的选择类型：地区、OMC 和交换机。用户可以根据选择显示不同的下拉列表，并通过按钮将选项从一个列表移动到另一个列表。此外，页面还包含了初始化和切换选择类型的 JavaScript 函数。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test_test" %>

<!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>
<title></title>
<script language="javascript" type="text/javascript">
function goLeftRange(){   
    for (var i = 0; i <document.form1.Range1.length; i++) {
        if (document.form1.Range1.options[i].selected == true) {
            var sign=false;
            for(j=0;j<document.form1.Range2.length;j++){
                if(document.form1.Range1.options[i].value==document.form1.Range2.options[j].value){
                    sign=true;
                }
            }
            if(sign==false){
                myoption = new Option(document.form1.Range1.options[i].value);
                document.form1.Range2.options.add(myoption);
            }
        }
    }
}

function goRightRange(){
    for (var i = 0; i <document.form1.Range2.length; i++) {
        if (document.form1.Range2.options[i].selected == true) {
            document.form1.Range2.remove(i);
        }
    }
}

function goLeftOMC(){   
    for (var i = 0; i <document.form1.OMC1.length; i++) {
        if (document.form1.OMC1.options[i].selected == true) {
            var sign=false;
            for(j=0;j<document.form1.OMC2.length;j++){
                //alert(document.form1.OMC1.options[i].value+"=================="+document.form1.OMC2.options[j].value);     
                if(document.form1.OMC1.options[i].value==document.form1.OMC2.options[j].value){
                    sign=true;
                }
            }
            if(sign==false){
                //alert(document.form1.OMC1.value);
                myoption = new Option(document.form1.OMC1.options[i].value);
                document.form1.OMC2.options.add(myoption);
            }
        }
    }
}

function goRightOMC(){
    for (var i = 0; i <document.form1.OMC2.length; i++) {
        if (document.form1.OMC2.options[i].selected == true) {
            document.form1.OMC2.remove(i);
        }
    }
}

function goLeftJiaoHuanJi(){   
    for (var i = 0; i <document.form1.JiaoHuanJi1.length; i++) {
        if (document.form1.JiaoHuanJi1.options[i].selected == true) {
            var sign=false;
            for(j=0;j<document.form1.JiaoHuanJi2.length;j++){
                //alert(document.form1.JiaoHuanji1.options[i].value+"=================="+document.form1.JiaoHuanJi2.options[j].value);     
                if(document.form1.JiaoHuanJi1.options[i].value==document.form1.JiaoHuanJi2.options[j].value){
                    sign=true;
                }
            }
            if(sign==false){
                //alert(document.form1.JiaoHuanji1.value);
                myoption = new Option(document.form1.JiaoHuanJi1.options[i].value);
                document.form1.JiaoHuanJi2.options.add(myoption);
            }
        }
    }
}

function goRightJiaoHuanJi(){
    for (var i = 0; i <document.form1.JiaoHuanJi2.length; i++) {
        if (document.form1.JiaoHuanJi2.options[i].selected == true) {
            document.form1.JiaoHuanJi2.remove(i);
        }
    }
}

function changeSelectType(){
    //alert("value===="+document.form1.selectType.options[document.form1.selectType.options.selectedIndex].value);
   
    if(document.form1.selectType.options.selectedIndex == 0){
        //alert("1=============");
        document.getElementById("Div_Range").style.visibility='visible';
        document.getElementById("Div_OMC").style.visibility='hidden';
        document.getElementById("Div_JiaoHuanJi").style.visibility='hidden';
    }
   
    if(document.form1.selectType.options.selectedIndex == 1){
        //alert("2=============");
        document.getElementById("Div_Range").style.visibility='hidden';
        document.getElementById("Div_OMC").style.visibility='visible';
        document.getElementById("Div_JiaoHuanJi").style.visibility='hidden';
    }
   
     if(document.form1.selectType.options.selectedIndex == 2){
        //alert("3=============");
        document.getElementById("Div_Range").style.visibility='hidden';
        document.getElementById("Div_OMC").style.visibility='hidden';
        document.getElementById("Div_JiaoHuanJi").style.visibility='visible';
    }
}

function intialPage(){
    //alert("1----------");
    document.getElementById("Div_Range").style.visibility='visible';
    document.getElementById("Div_OMC").style.visibility='hidden';
    document.getElementById("Div_JiaoHuanJi").style.visibility='hidden';

}
</script>


</head>
<body onload="intialPage()">
<form name="form1" id="form1" action="">

<select name="selectType" onchange="changeSelectType()">
    <option value="地区" selected>地区</option>
    <option value="OMC">OMC</option>
    <option value="交换机">交换机</option>
</select>

<div name="Div_Range" id="Div_Range" style="visibility:visible; top:70px; position:absolute;left:0px">
<table>
<tr>
<td>
<select name="Range1" id="Range1" multiple >
    <asp:Repeater ID="RangeRepeater" runat="server">
    <ItemTemplate>
        <option value="<%# Eval("地区") %> ">
            <%# Eval("地区") %>
        </option>
    </ItemTemplate>
    </asp:Repeater>

</select>
</td>
<td>
<input type="button" value=">>" onclick="goLeftRange()"/>
<br/>
<input type="button" value="<<" onclick="goRightRange()"/>
</td>
<td>
<select name="Range2" id="Range2" multiple>
</select>
</td>
</table>
</div>


<div name="Div_OMC" id="Div_OMC" style="top:70px; position:absolute;left:0px">
<table id="T_OMC">
<tr>
<td>
<select name="OMC1" id="OMC1" multiple>
    <asp:Repeater ID="OMCRepeater" runat="server">
    <ItemTemplate>
        <option value="<%# Eval("OMC") %> ">
            <%# Eval("OMC") %>
        </option>
    </ItemTemplate>
    </asp:Repeater>

</select>
</td>
<td>
<input type="button" value=">>" onclick="goLeftOMC()"/>
<br/>
<input type="button" value="<<" onclick="goRightOMC()"/>
</td>
<td>
<select name="OMC2" id="OMC2" multiple>
</select>
</td>
</table>
</div>

<div name="Div_JiaoHuanJi" id="Div_JiaoHuanJi" style="top:70px; position:absolute;left:0px">
<table  id="T_JiaoHuanJi">
<tr>
<td>
<select name="JiaoHuanJi1" id="JiaoHuanJi1" MULTIPLE>
    <asp:Repeater ID="JiaoHuanJiRepeater" runat="server">
    <ItemTemplate>
        <option value="<%# Eval("交换机") %> ">
            <%# Eval("交换机")%>
        </option>
    </ItemTemplate>
    </asp:Repeater>

</select>
</td>
<td>
<input type="button" value=">>" onclick="goLeftJiaoHuanJi()"/>
<br/>
<input type="button" value="<<" onclick="goRightJiaoHuanJi()"/>
</td>
<td>
<select name="JiaoHuanJi2" id="JiaoHuanJi2" multiple>
</select>
</td>
</table>
</div>

</form>
</body>
</html>
 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值