在第二个选择框中禁用第一个选择框的选定选项

Question

我想通过插入他们的学科名称和他们的分数范围来查找学生的数据。教师可以使用添加按钮添加新科目，也可以删除科目。此外，已在前一行中选择的主题/选项将在下一个新行中禁用。这是html代码<button type="button" class="btn btn-bricky btn-sm" onclick="deleteRow('dataTable')"><span class="glyphicon glyphicon-remove"></span> Delete Row</button><table id="dataTable" class="table table-striped"  style="font-size: 12px" >  <tr>    <td><input type="checkbox" name="chk"/></td>    <td>        <select name="subject" id="subject">                          <option value="Math">Math</option>                          <option value="Physic">Physic</option>                          <option value="Chemistry">Chemistry</option>                          <option value="Biology">Biology</option>                </select>Score Min : <input type="number" name="comsMin" style="width:70px" min="0" max="100"/>Max :  <input type="number" name="comsMax" style="width:70px" min="0" max="100"/></td></tr></table>这是 JavaScript 代码function addRow(tableID) {            var table = document.getElementById(tableID);            var rowCount = table.rows.length;            var row = table.insertRow(rowCount);            var colCount = table.rows[0].cells.length;            for(var i=0; i<colCount; i++) {                var newcell = row.insertCell(i);                newcell.innerHTML = table.rows[0].cells[i].innerHTML;                //alert(newcell.childNodes);                switch(newcell.childNodes[0].type) {                    case "#text":                            newcell.childNodes[0].value = "";                            break;                    case "#checkbox":                            newcell.childNodes[0].checked = false;                            break;                    case "#select-one":                            newcell.childNodes[0].selectedIndex = 0;                            break;                }            }        }我的问题是我不知道如何以及在哪里编写代码来禁用在新添加的选择框中的第一个选择框中选择的所选选项。这可能吗？

Answer 1

我们可以有一个单独的表来以隐藏模式存储数据集并在其中维护选择状态。除了隐藏元素，您还可以在javascript变量中维护状态。

function syncModdelAdd(tableID){

    //  Get the available selections

  var table = document.getElementById(tableID);

  var rowCount = table.rows.length;

  var dataTable = document.getElementById('dataTable');

  for(var i=0; i<rowCount; i++){

    var selectedIndex = table.rows[i].cells[1].childNodes[1].selectedIndex;

        dataTable.rows[0].cells[1].childNodes[1].options[selectedIndex].disabled=true;

  }

}

function syncModelDelete(selectedIndex){

  var dataTable = document.getElementById('dataTable');  

    dataTable.rows[0].cells[1].childNodes[1].options[selectedIndex].disabled=false;

  var table = document.getElementById('resultTable');

  var totalRows = table.rows.length;

  table.rows[totalRows-1].cells[1].childNodes[1].options[selectedIndex].disabled=false;

}

小提琴链接：https : //jsfiddle.net/2tfacL9k/