Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 67441

Disable selected option of the first select box in the second select box

$
0
0

I want to find student's data by inserting their subject name and their score range. The teacher can add a new subject with an add button and can remove the subject too. Also the subject/option that has been already selected in the previous row will disable in the next new row.

  1. Here is the html code
<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>

And here is the JavaScript code

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;
                }
            }
        }
//--------------
        function deleteRow(tableID) {
            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;

            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    if(rowCount <= 1) {
                        alert("Cannot delete all the rows.");
                        break;
                    }
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }


            }
            }catch(e) {
                alert(e);
            }
        }

My problem is that I don't know how and where to write a code to disable the selected option that had been chosen in the first select box in the new added select box.

Is this possible? Here's JS fiddle


Viewing all articles
Browse latest Browse all 67441

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>