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右边的值也改变 实实改变
<!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右边的值也改变 实实改变