1

最初にリスト ボックスから (1 つまたは複数の) 項目を選択し、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>
4

1 に答える 1

0

これは、あなたのロジックが間違っているためです。アイテムを再度有効にすると、選択したアイテムが反復処理されます。

シナリオ 1 - APPLE を選択します。[選択済み] をクリックします。[削除] をクリックします。--> APPLE が有効になっていることがわかります。

シナリオ 2 - APPLE を選択します。[選択済み] をクリックします。オレンジを選択。[削除] をクリックします。--> 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>
于 2013-02-25T19:38:21.887 に答える