Question

我正在尝试编写一个独立的javascript，我首先从列表框中选择（单个或多个）项目，并在名为DBA的文本框中指定我的名字。

这将根据“selected”的＃创建底部的行条目。现在，当我“删除”该行时，我无法重新启用已删除的列表框项目。这是我的代码：

<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。单击选定。单击删除。 - ＆GT;您将看到APPLE已启用。

场景2 - 您选择APPLE。单击选定。选择ORANGE。单击删除。 - ＆GT;您将看到APPLE NOT 已启用。

因此，您需要记住要删除的元素以重新启用它们。而且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>

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

1 个答案: