重新啓用列表框中禁用的項目

Question

我想寫一個獨立的javascript，我首先從列表框中選擇（單個或多個）項目，並在名爲DBA的文本框中指定我的名字。

這將根據「選定」的＃號在底部創建行條目。 現在，當我「刪除」該行時，我無法重新啓用已刪除的列表框項目。 這是我的代碼：

<form name="myform" action="" method="get" id="myform"> 
    <table border="1" cellpadding="10" cellspacing="0" id="table1"> 
     <tr> 
      <td valign="top"><input type="button" value="Selected" onclick="addRow();" /> 
       <br /> 
       <select name="selSea" id="selSeaShells" size="5" multiple="multiple"> 
        <option value="ORANGE" selected="selected"> 
        ORANGE 
        </option> 

        <option value="APPLE" selected="selected"> 
        APPLE 
        </option> 

        <option value="GRAPE" selected="selected"> 
        GRAPE 
        </option> 

        <option value="BANANA" selected="selected"> 
        BANANA 
        </option> 

        <option value="TREE" selected="selected"> 
        TREE 
        </option> 

        <option value="TEST" selected="selected"> 
        TEST 
        </option> 

        <option value="NEWS" selected="selected"> 
        NEWS 
        </option> 

        <option value="SKY" selected="selected"> 
        SKY 
        </option> 
       </select> 
      </td> 

      <td valign="top"><input type="text" id="DBA" name="DBA" value="" /> DBA</td> 
     </tr> 
    </table> 
</form> 
<script language="JavaScript" type="text/javascript"> 
    //<![CDATA[ 
    <!-- 

    function addRow() 
    { 
     var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0]; 
     var DBAValuesObj = document.myform.DBA.value; 
     var selectedArray = new Array(); 
     var selObj = document.getElementById('selSeaShells'); 
     var i; 
     var count = 0; 
     for (i=0; i<selObj.options.length; i++) { 
      if (selObj.options[i].selected) { 
       selObj.options[i].disabled = 'disabled'; 
       selectedArray[count] = selObj.options[i].value; 
       count++; 
      } 
     } 
     tbody.value = selectedArray + "." + DBAValuesObj; 

     var row = document.createElement('TR'); 
     var cell1 = document.createElement('TD'); 
     var cell2 = document.createElement('TD'); 
     var inp1 = document.createElement('INPUT'); 
     var inp2 = document.createElement('INPUT'); 
     inp1.setAttribute('type','text'); 
     inp1.setAttribute('name','PartIDArray[]'); 
     inp1.setAttribute('size','15'); 
     inp1.setAttribute('maxlength','20'); 
     inp1.setAttribute('value',''); 

     inp1.setAttribute('value',tbody.value); 

     inp2.setAttribute('type','button'); 
     inp2.setAttribute('value','Delete'); 
     inp2.onclick=function(){delRow(this);} 
     cell1.appendChild(inp1); 
     row.appendChild(cell1); 
     cell2.appendChild(inp2); 
     row.appendChild(cell2); 
     tbody.appendChild(row); 
    } 

    function delRow(button) 
    { 
     var row = button.parentNode.parentNode; 
     var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0]; 


     var selArray = new Array(); 
     var selObject = document.getElementById('selSeaShells'); 
     var i; 
     var count = 0; 
     for (i=0; i<selObject.options.length; i++) { 
      if (selObject.options[i].selected) { 
       selObject.options[i].disabled = ''; 
       selArray[count] = selObject.options[i].value; 
       count++; 
      } 
     } 

    tbody.removeChild(row); 
    } 

    //--> 
    //]]> 
</script> 

Answer 1

這是因爲你的邏輯錯誤。重新啓用項目時，您正在遍歷所選項目。

情景1 - 您選擇APPLE。點擊選中。點擊刪除。 - >你會看到APPLE被啓用。

情景2 - 您選擇APPLE。點擊選中。選擇ORANGE。點擊刪除。 - >你會看到APPLE是不是啓用。

因此，您需要記住要刪除哪些元素以重新啓用它們。和selObject.options[i].disabled = '';將工作。其技術上正確。但是，邏輯很糟糕。

工作代碼：

<form NAME="myform" action="" method="get"> 
<table border="1" cellpadding="10" cellspacing="0" id="table1"> 
<tr> 
<td valign="top"> 
<input type="button" value="Selected" onclick="addRow();" /> 
<br /> 
<select name="selSea" id="selSeaShells" size="5" multiple="multiple"> 
<option value="ORANGE" selected>ORANGE</option> 
<option value="APPLE" selected>APPLE</option> 
<option value="GRAPE" selected>GRAPE</option> 
<option value="BANANA" selected>BANANA</option> 
<option value="TREE" selected>TREE</option> 
<option value="TEST" selected>TEST</option> 
<option value="NEWS" selected>NEWS</option> 
<option value="SKY" selected>SKY</option> 
</select> 
</td> 
<td valign="top"> 
<input type="text" id="DBA" NAME="DBA" VALUE="" /> 
DBA 
</td> 

</tr> 
</table> 
</form> 

<script language="JavaScript" type="text/javascript"> 
<!-- 

function addRow() 
{ 
var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0]; 
var DBAValuesObj = document.myform.DBA.value; 
var selectedArray = new Array(); 
var selObj = document.getElementById('selSeaShells'); 
var i; 
var count = 0; 
for (i=0; i<selObj.options.length; i++) { 
if (selObj.options[i].selected) { 
     selObj.options[i].disabled = 'disabled'; 
selectedArray[count] = selObj.options[i].value; 
     count++; 
} 
} 
tbody.value = selectedArray + "." + DBAValuesObj; 


var row = document.createElement('TR'); 
var cell1 = document.createElement('TD'); 
var cell2 = document.createElement('TD'); 

var inp1 = document.createElement('INPUT'); 
var inp2 = document.createElement('INPUT'); 
inp1.setAttribute('type','text'); 
inp1.setAttribute('name','PartIDArray[]'); 
inp1.setAttribute('size','15'); 
inp1.setAttribute('maxlength','20'); 
inp1.setAttribute('value',''); 

inp1.setAttribute('value',tbody.value); 

inp2.setAttribute('type','button'); 
inp2.setAttribute('value','Delete'); 
inp2.onclick=function(){delRow(this);} 
cell1.appendChild(inp1); 
row.appendChild(cell1); 
cell2.appendChild(inp2); 
row.appendChild(cell2); 

var cell3 = document.createElement('INPUT'); 
cell3.setAttribute('type','HIDDEN'); 
cell3.setAttribute('value',selectedArray); 

row.appendChild(cell3); 

tbody.appendChild(row); 
} 
     function delRow(button) 
{ 
var row = button.parentNode.parentNode; 
var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0]; 


var selArray = new Array(); 
var selObject = document.getElementById('selSeaShells'); 
var i; 
var count = 0; 
for (i=0; i<selObject.options.length; i++) { 
if (selObject.options[i].value.indexOf(row.childNodes[2].value)>-1) { 

     selObject.options[i].disabled = ''; 
     selArray[count] = selObject.options[i].value; 
     count++; 
} 
} 


tbody.removeChild(row); 
} 

//--> 
</script>