下拉菜单中选项的操作问题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function selChange(){ var objselect = document.all.select;
var objcheckbox = document.all.checkbox;
var selectLen = objselect.length ;
var checkboxLen = objcheckbox.length; var i; //alert ( selectLen );
//alert ( checkboxLen ); if(checkboxLen > 0){ //alert ( checkboxLen ); for(i = 0 ;i < checkboxLen;i++){

//alert ( i ); if(objcheckbox[i].checked == true){ //alert ( objcheckbox[i].checked ); if (selectLen == 0){ //alert ( "P1" ); objselect.length = 1; objselect.options[0].value = objcheckbox[i].value;
objselect.options[0].innerHTML =  objcheckbox[i].value;

selectLen = objselect.length ;
}
else{ //alert ( "P2" ); objselect.length = objselect.length + 1;
selectLen = objselect.length ; objselect.options[selectLen-1].value = objcheckbox[i].value;
objselect.options[selectLen-1].innerHTML =  objcheckbox[i].value;
selectLen = objselect.length ;
}
}
}
//alert( objselect.length );
if (objselect.length==0 ){
alert("一つ選択してください。");
}
}}
function selDel(){ var objselect = document.all.select;
var objcheckbox = document.all.checkbox;
var selectLen = objselect.length ;
var checkboxLen = objcheckbox.length; var i;
var j;
var k; i=0;
j=0;
k=0; //alert( selectLen ); if(selectLen == 0){ alert ( 'no values' );
return 0;
} for(i = selectLen;i > 0;i--){

//alert ( i ); if(objselect.options[i-1].selected == true){

//alert( "Value of now: \n" + objselect.options[i-1].value ); /**/
for(j = i;j < selectLen;j++){ objselect.options[j-1].value = objselect.options[j].value;
objselect.options[j-1].text = objselect.options[j].text;
//alert( j + "つ目：\n" + objselect.options[j].value + "->" + objselect.options[j-1].value );
}
k = k + 1; } }
objselect.length = objselect.length - k;
selectLen = objselect.length ;
}
//-->
</SCRIPT>
<BODY>
<form name="form1" method="post" action="">
  <table width="100%" height="282" border="0" cellpadding="0" cellspacing="0">
    <tr> 
      <td width="12%" height="42" rowspan="2"></td>
      <td colspan="2">&nbsp;</td>
      <td width="13%" rowspan="5" align="center" valign="top"> 
        <input type="button" onClick="selChange()" value="添加"> 
<input type="button" onClick="selDel()" value="消す">
      </td>
      <td width="47%" rowspan="5" valign="top">
<select name="select" size="1" multiple style="width:200px;height:200px">
</select>
</td>
    </tr>
    <tr> 
      <td rowspan="2">&nbsp;</td>
      <td width="24%"><input type="checkbox" name="checkbox" value="川">川</td>
    </tr>
    <tr> 
      <td rowspan="2">&nbsp;</td>
  <td colspan="2"><input type="checkbox" name="checkbox" value="局">局</td>
    </tr>
    <tr> 
      <td rowspan="2">&nbsp;</td>
      <td colspan="2"><input type="checkbox" name="checkbox" value="国">国</td>
    </tr>
    <tr> 
      <td colspan="3">&nbsp;</td>
    </tr>
  </table>
</form></BODY>
</HTML>这个代码的删除就是按照排序后来删除的，你可以参考下

解决方案 »

  1.   

    <script>
    var quanju=1;
    var temp;
    function fnc(){
    try{
    if (quanju!=4)
    //alert (quanju)
    temp=sel.options[quanju].text;
    sel.options[quanju].text= sel.options[quanju-1].text;
    sel.options[quanju-1].text=temp;}
    catch(e)
    {
    alert("The lastone cannt do the job.")
    }
    }
    function fnc1(){
    //这为了省事，就这么写了。
    quanju=(event.srcElement.value)
    }
    </script>
    <select style="width:100" id="sel" onchange="fnc1();">
    <option value="1" name="opt">1</option>
    <option value="2" name="opt">2</option>
    <option value="3" name="opt">3</option>
    <option value="4" name="opt">4</option>
    </select>
    <input type="hidden" id="hdn">
    <input type="button" value="down" onclick="fnc();">