当前位置:编程学习 > asp >>

推荐:列表项可上下移动的Multiple列表!

答案:<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<STYLE>
BODY, SELECT
{
    FONT-FAMILY: TIMES NEW ROMAN;
    FONT-SIZE: 10PT;
}
</STYLE>
<SCRIPT LANGUAGE="javascript">
<!--
window.onload = initPage;
function initPage()
{
    btnPutUp.onclick    = putUp;
    btnPutDown.onclick    = putDown;

    btnGoUp.onclick    = goUp;
    btnGoDown.onclick    = goDown;
}

function putUp()
{
    var strTempValue;
    var strTempText;
    var intCurIndex;
    
    intCurIndex = sltFruit.selectedIndex;
    //alert("intCurIndex: " + intCurIndex);

    if (intCurIndex > 0)
    {
        strTempValue= sltFruit.options.item(intCurIndex).value;
        strTempText    = sltFruit.options.item(intCurIndex).text;
        //alert(strTempText + " - " + strTempValue);
        
        sltFruit.options.item(intCurIndex).value    = sltFruit.options.item(intCurIndex - 1).value;
        sltFruit.options.item(intCurIndex).text        = sltFruit.options.item(intCurIndex - 1).text;
        sltFruit.options.item(intCurIndex - 1).value= strTempValue;
        sltFruit.options.item(intCurIndex - 1).text    = strTempText;
        sltFruit.selectedIndex = intCurIndex - 1;
    }
}

function putDown()
{
    var strTempValue;
    var strTempText;
    var intCurIndex;
    var intIndexCount;
    
    intCurIndex    = sltFruit.selectedIndex;
    intIndexCount    = sltFruit.length;
    //alert("intCurIndex: " + intCurIndex);
    //alert("intIndexCount: " + intIndexCount);
    
    if (intCurIndex < intIndexCount - 1)
    {
        strTempValue= sltFruit.options.item(intCurIndex).value;
        strTempText    = sltFruit.options.item(intCurIndex).text;
        //alert(strTempText + " - " + strTempValue);
        
        sltFruit.options.item(intCurIndex).value    = sltFruit.options.item(intCurIndex + 1).value;
        sltFruit.options.item(intCurIndex).text        = sltFruit.options.item(intCurIndex + 1).text;
        sltFruit.options.item(intCurIndex + 1).value= strTempValue;
        sltFruit.options.item(intCurIndex + 1).text    = strTempText;
        sltFruit.selectedIndex = intCurIndex + 1;
    }
}

function goUp()
{
    var intCurIndex;
    intCurIndex = sltCountry.selectedIndex;

    if (intCurIndex > 0)
        sltCountry.selectedIndex = intCurIndex - 1;
}

function goDown()
{
    var intCurIndex;
    var intIndexCount;
    
    intCurIndex        = sltCountry.selectedIndex;
    intIndexCount    = sltCountry.length;
    
    if (intCurIndex < intIndexCount - 1)
        sltCountry.selectedIndex = intCurIndex + 1;
}
//-->
</SCRIPT>
</HEAD>

<BODY>

</BODY>
水果列表<BR>
1 - 香蕉<BR>
2 - 苹果<BR>
3 - 葡萄<BR>
4 - 桔子<BR>
5 - 西瓜<BR>
<SELECT NAME="sltFruit" SIZE="5">
    <OPTION VALUE="1">香蕉</OPTION>
    <OPTION VALUE="2">苹果</OPTION>
    <OPTION VALUE="3">葡萄</OPTION>
    <OPTION VALUE="4">桔子</OPTION>
    <OPTION VALUE="5">西瓜</OPTION>
</SELECT>

<INPUT TYPE="BUTTON" ID="btnPutUp" VALUE="上移">
<INPUT TYPE="BUTTON" ID="btnPutDown" VALUE="下移">
<HR>

国家列表<BR>
1 - China<BR>
2 - USA<BR>
3 - USSR<BR>
4 - England<BR>
5 - France<BR>
<SELECT NAME="sltCountry">
    <OPTION VALUE="1">China</OPTION>
    <OPTION VALUE="2">USA</OPTION>
    <OPTION VALUE="3">USSR</OPTION>
    <OPTION VALUE="4">England</OPTION>
    <OPTION VALUE="5">France</OPTION>
</SELECT>

<INPUT TYPE="BUTTON" ID="btnGoUp" VALUE="上移">
<INPUT TYPE="BUTTON" ID="btnGoDown" VALUE="下移">
</HTML>

上一个:在网页中实现像VB的日期控件那样的组件,一点击就弹出日历菜单。。。。(原创!)
下一个:非常好用的日期选择器,建议入精华 <一> 有演示

CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,