移动（增加删除）option 增加难度疑问

来源：互联网发布：如何安装proteus软件编辑：程序博客网时间：2024/06/14 22:31

PHP代码如下:
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
select { display:inline; width:150px; background:#cef;}
</style>
</head>

<body>
<select size="10" id="selectleft">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<input type="button" id="addto" value="添加" />
<input type="button" id="moveback" value="删除" />
<select size="10" id="selectright">

</select>
<input type="button" id="up" value="上移" />
<input type="button" id="down" value="下移" />
<input type="text" id="change" value="修改名字" />

<script type="text/javascript">
var addTo       = document.getElementById("addto");
var moveBack    = document.getElementById("moveback");
var selectLeft = document.getElementById("selectleft");
var selectRight = document.getElementById("selectright");
var up          = document.getElementById("up");
var down        = document.getElementById("down");
var change      = document.getElementById("change");
addTo.onclick    = addOption;
moveBack.onclick = delOption;
up.onclick       = actionup;
down.onclick     = actiondown;
change.onkeyup   = actionchange;
change.onfocus   = function(){change.value = "";};
//这个函数检验传入的值是否在有边出现过！
function hasOption(str){
    for(var i=0;i<selectRight.options.length;i++){
        if(selectRight.options[i].value==str){
        return false;
        }
    }
    return true;
}

function addOption(){
    var nowIndex    = selectRight.options.length;              //右边的下一个索引
    var selectIndex = selectLeft.options.selectedIndex;        //做边被选种项索引
    var selectText = selectLeft.options[selectIndex].text;    //被选种项文本
    var selectValue = selectLeft.options[selectIndex].value;   //被选种项值

    if((selectIndex!=-1)&&hasOption(selectValue)){             //如果选了一项且右边没有，执行
    var newoption   = new Option(selectText,selectValue,false,false);
    selectRight.options[nowIndex] = newoption;
    }
}
function delOption(){
    var selectIndex = selectRight.options.selectedIndex;
    if(selectIndex!=-1){
    selectRight.options[selectIndex] = null;                   //清空选种项
    }
}

function actionup(){

        if(!selectRight.options.length||!selectRight.options.selectedIndex||selectRight.options.selectedIndex==-1){ return;}

    var selectIndex = selectRight.options.selectedIndex;        //右边被选种项索引

    var temp1option = new Option(selectRight.options[selectIndex-1].text,selectRight.options[selectIndex-1].value,false,false);
    var temp2option = new Option(selectRight.options[selectIndex].text,selectRight.options[selectIndex].value,false,false);

    selectRight.options[selectIndex-1] = temp2option;

    selectRight.options[selectIndex] = temp1option;

        selectRight.options.selectedIndex = selectIndex-1;
}

function actiondown(){

    if(!selectRight.options.length||selectRight.options.selectedIndex==-1||selectRight.options.selectedIndex==selectRight.options.length-1){ return;}

    var selectIndex = selectRight.options.selectedIndex;        //右边被选种项索引

    var temp1option = new Option(selectRight.options[selectIndex+1].text,selectRight.options[selectIndex+1].value,false,false);
    var temp2option = new Option(selectRight.options[selectIndex].text,selectRight.options[selectIndex].value,false,false);

    selectRight.options[selectIndex+1] = temp2option;

    selectRight.options[selectIndex] = temp1option;

        selectRight.options.selectedIndex = selectIndex+1;
}

function actionchange(){
if(!selectRight.options.length||selectRight.options.selectedIndex==-1){ return;}
var selectIndex = selectRight.options.selectedIndex;
selectRight.options[selectIndex].text = change.value

}

</script>
</body>
</html>

现在需要点击向上  右边的值向上移动一下  向下右边的值向下移动一下
点击右边的值的时候在name文本框内显示右边的值修改name值时对应option右边的值也改变实实改变