下拉框上下排序和移动
<html>
<head>
<script language="text/javascript"? src="jquery1.4.js"></script>
</head>
<body>
?? <table align="center">
?? ??<tr>
?? ???<td>
?? ??<select size="8" id="select1" style="width: 150px;height: 500px;">
????<option >1</option>
????<option >2</option>
????<option >3</option>
????<option >4</option>
????<option >5</option>
????<option >6</option>
????<option >7</option>
????<option >8</option>
???</select>
?? ???</td>
?? ???<td>
?? ????<ul>
?? ????<li><a href="javascript:void(0);" id="rightall" >RightAll</a></li>
?? ????<li><a href="javascript:void(0);" id="right" >Right</a></li>
?? ????<li><a href="javascript:void(0);" id="left" >Left</a></li>
?? ????<li><a href="javascript:void(0);" id="leftall" >LeftAll</a></li>
?? ????</ul>
?? ???</td>
?? ???<td>
?? ????<select size="8" id="select2" style="width: 150px;height: 500px;">
?? ????</select>
?? ???</td>
?? ???<td>
?? ????<ul>
?? ????<li><a href="javascript:void(0);" id="up" >up</a></li>
?? ????<li><a href="javascript:void(0);" id="down" >down</a></li>
?? ????</ul>
?? ???</td>
?? ??</tr>
?? </table>
</body>
</html>
<script type="text/javascript">
$(function(){
?$('#rightall').click(function(){
??var options=$('#select1 option').remove();
??$('#select2').append(options);
?});
?
?$('#right').click(function(){
??var options=$('#select1 option:selected').remove();
??$('#select2').append(options);
?});
?
?$('#left').click(function(){
??var options=$('#select2 option:selected').remove();
??$('#select1').append(options);
?});
?
?$('#leftall').click(function(){
??var options=$('#select2 option').remove();
?
??$('#select1').append(options);
?});
?var selectObj2=document.getElementById('select2');
?$('#up').click(function (){
??var selIndex=selectObj2.selectedIndex;
??if(selIndex<=0){
???return;
??}
??var selValue=selectObj2.options[selIndex].value;
??var selText=selectObj2.options[selIndex].text;
??selectObj2.options[selIndex].value=selectObj2.options[selIndex-1].value;
??selectObj2.options[selIndex].text=selectObj2.options[selIndex-1].text;
??selectObj2.options[selIndex-1].value=selValue;
??selectObj2.options[selIndex-1].text=selText;
??selectObj2.selectedIndex=selIndex-1;
?});
?$('#down').click(function (){
???var selIndex=selectObj2.selectedIndex;
???if(selIndex==selectObj2.options.length-1){
????return;
???}
???var selValue=selectObj2.options[selIndex].value;
???var selText=selectObj2.options[selIndex].text;
???selectObj2.options[selIndex].value=selectObj2.options[selIndex+1].value;
???selectObj2.options[selIndex].text=selectObj2.options[selIndex+1].text;
???selectObj2.options[selIndex+1].value=selValue;
???selectObj2.options[selIndex+1].text=selText;
???selectObj2.selectedIndex=selIndex+1;?
?});
?
?$('#close').click(function (){
???window_kill();
?});
?
?$('#save').click(function (){
??var options='';
??$('#select2 option').each(function(){
???options+=$(this).text()+",";
??});
??$('#selects').val(options);
??document.listForm.submit();
?});
});
</script>
