重新启用列表框中禁用的项目

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>