如果实现下拉框的,上移,下移,增加,删除,详情请进.

<SCRIPT LANGUAGE="JavaScript">
<!--
function addItem()
 {
  var txt=document.all("txt").value;  
  if(txt!="")
  {
   var group = document.createElement('OPTGROUP');
//   group.label = document.all.mySelect.length + 1;
//   document.all.mySelect.appendChild(group);   
   var opt = new Option(txt,txt);
   document.all.mySelect.add(opt)
   opt.selected;
   document.all.txt.value='';
  }
  else
  {
   alert("You must write something!");
  }
 }
 function delItem()
 {
  mySelect.remove(mySelect.selectedIndex)
 }
 function upItem()
 {
  var index = mySelect.selectedIndex;
if(index != 0)
{
var tempVal = mySelect.options[index].value;
var tempText = mySelect.options[index].text;
mySelect.options[index].value = mySelect.options[index-1].value;
mySelect.options[index].text = mySelect.options[index-1].text;
mySelect.options[index-1].value = tempVal;
mySelect.options[index-1].text = tempText;
mySelect.options[index-1].selected = true;
}
 }
 function downItem()
 {
  var index = mySelect.selectedIndex;
if(index != mySelect.options.length-1)
{
var tempVal = mySelect.options[index].value;
var tempText = mySelect.options[index].text;
mySelect.options[index].value = mySelect.options[index+1].value;
mySelect.options[index].text = mySelect.options[index+1].text;
mySelect.options[index+1].value = tempVal;
mySelect.options[index+1].text = tempText;
mySelect.options[index+1].selected = true;
}
 }
//-->
</SCRIPT>
</HEAD><BODY>
<select name="mySelect" size="18" id="mySelect"  class="ddlEnable"  >
   <optgroup >
  <option value="1">item1</option>  <option value="2">item2</option>  <option value="3">item3</option>  <option value="4">item4</option>
  </optgroup>
  </select>
<input type="button" id="btnUpdata" value="上移" onclick="upItem()" /><input type="button"  value="下移" onclick="downItem()"  /><input type="button" id="btnUpdata" value="删除" onclick="delItem()" />
  <br/>
  <input type="text" size=68 name="txt"  id="txt" class="txtReadonly" />
  <input type="button" name="btnUpdata" id="btnUpdata" value="add" onclick="addItem();" />
</HTML>

解决方案 »

  1.   

    <html>
    <head>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    // code by meixx(梅雪香)
    function addItem()
     {
    var txt = document.getElementById("txt");
    var val = txt.value;
    if(val == ""){
    alert("You must write something!");
    return;
    }
    var opt = document.createElement("OPTION");
    opt.value = opt.text = val;
    document.getElementById("mySelect").options.add(opt);
    opt.selected = true;
    txt.value = "";
    }
    function moveUpOrDown(flag){
    var dlt = document.getElementById("mySelect");
    var idx = dlt.selectedIndex;
    if(idx < 0 ){ return;}
    var newidx = idx + flag;
    if(newidx < 0 || newidx >= dlt.options.length){ return ;}
    dlt.options[idx].swapNode(dlt.options[newidx]);
    }function rmOpt(){
    var dlt = document.getElementById("mySelect");
    var idx = dlt.selectedIndex;
    if(idx < 0 ){ return;}
    dlt.remove(idx);
    }//-->
    </SCRIPT>
    </HEAD><BODY>
    <select name="mySelect" size="18" id="mySelect"  class="ddlEnable"  >
       <optgroup >
      <option value="1">item1</option>
      <option value="2">item2</option>
      <option value="3">item3</option>
      <option value="4">item4</option>
      </optgroup>
    </select>
    <input type="button" value="上移" onclick="moveUpOrDown(-1)"/>
    <input type="button" value="下移" onclick="moveUpOrDown(1)"/>
    <input type="button" value="删除" onclick="rmOpt()"/>
    <br/>
    <input type="text" size="68" name="txt"  id="txt" class="txtReadonly" />
    <input type="button" name="btnUpdata" id="btnUpdata" value="add" onclick="addItem();" />
    </body>
    </HTML>