javascript select work

樣式：（本頁中操作不起作用，只為原型，其腳與html請看 樣本下一個）

 Insert Before Selected
 Remove Selected
Append5Append6Append7Append8Append10Append11Append12Append13Append14Append15
 Append Last
 Remove Last

 

The JavaScript
<script language="JavaScript" type="text/javascript">
var count1 = 0;
var count2 = 0;
function insertOptionBefore(num)
{
    var diabloselect = document.getElementById('selectX'); 
 if (diabloselect.selectedIndex >= 0)
 {
        var selectoption = document.createElement('option');   
  selectoption.text = 'Insert' + num;   
  selectoption.value = 'insert' + num;   
  var currentoption = diabloselect.options[diabloselect.selectedIndex];  //current index   
  try
  {     
      diabloselect.add(selectoption, currentoption); // standards compliant; doesn't work in IE   
  }   
  catch(ex)
  {     
      diabloselect.add(selectoption, diabloselect.selectedIndex); // IE only   
  } 
 }
}
function removeOptionSelected()
{ 
    var diabloselect = document.getElementById('selectX'); 
 var i; 
 for (i = diabloselect.length - 1; i>=0; i--)
 {   
     if (diabloselect.options[i].selected)
  {     
      diabloselect.remove(i);   
  } 
 }
}
function appendOptionLast(num)
{ 
    var selectoption = document.createElement('option'); 
 selectoption.text = 'Append' + num; 
 selectoption.value = 'append' + num; 
 var diabloselect = document.getElementById('selectX'); 
 try
 {   
     diabloselect.add(selectoption, null); // standards compliant; doesn't work in IE 
 } 
 catch(ex)
 {   
     diabloselect.add(selectoption); // IE only 
 }
}
function removeOptionLast()
{ 
    var diabloselect = document.getElementById('selectX'); 
 if (diabloselect.length > 0) 
 {   
     diabloselect.remove(diabloselect.length - 1); 
 }
}
</script>
 
The HTML
<form>
<input type="button" value="o" onclick="insertOptionBefore(count1++);" />Insert Before Selected<br />
<input type="button" value="o" onclick="removeOptionSelected();" />Remove Selected<br />
<select id="selectX" size="10" multiple="multiple">
<option value="original1" selected="selected">Orig1</option>
<option value="original2">Orig2</option></select><br />
<input type="button" value="o" onclick="appendOptionLast(count2++);" />Append Last<br />
<input type="button" value="o" onclick="removeOptionLast();" />Remove Last
</form>