不允许在下拉列表中再次选择相同的值

Question

我想在下拉列表中选择时禁用或隐藏相同的值。

我有这样的代码：

＆＃13;

＆＃13;

function addRow() {
   var x = document.getElementById("bon").rows.length;
   var table = document.getElementById("bon").getElementsByTagName('tbody')[0];
   var row = table.insertRow(-1);
   var cell1 = row.insertCell(0);
   var cell2 = row.insertCell(1);
   var cell3 = row.insertCell(2);
   var cell4 = row.insertCell(3);
   var cell5 = row.insertCell(4);
   cell1.innerHTML = '<button tabindex="-1" type="button" class="btn red" onclick="javascript:deleteRow('+x+');">'+x+'</button>';
   cell2.innerHTML = '<div class="item form-group form-md-line-input">  <select id="select" class="form-control" name="kdbng[]" required=""> <option value="" selected="selected">Pilih Bahan Baku</option>  <?php while($data3=mysqli_fetch_array($tb)){  ?>        <option value="<?php echo $data3['id_bahan'] ?>"><?php echo $data3['nama_bahan']?></option> <?php  }  ?> </select></div>';
   cell3.innerHTML = '<div class="item form-group form-md-line-input">   <input type="number" min="1" class="form-md-line-input form-control qtbng" name="hrbng[]" required="" data-validate-minmax="1,10000000000"></div>';
   cell4.innerHTML = '<div class="item form-group form-md-line-input">   <input type="number" min="1" class="form-md-line-input form-control qtbng" name="qtbng[]" required="" data-validate-minmax="1,10000000000"></div>';

＆＃13;

<table class="table table-hover table-light" id="bon">
    <thead>
    <tr class="uppercase">
    <th width="10%"> # </th>
    <th width="30%">Nama Bahan Baku</th>
    <th width="30%">Harga</th>
    <th width="30%">Jumlah (Kg)</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
    </table>
    <a  href="javascript:addRow();"><button type="button" class="btn btn-primary">+</button></a>

＆＃13;

＆＃13;

＆＃13;

帮助我实现这一目标。

Answer 1

您可以通过检查选项的值来通过jQuery执行此操作。请参阅下面的代码示例，我只需在innerHTML行之后添加大约十行（不包括注释）。请注意我也更改了导出选项值的代码。

<script language="javascript">
var values;
function addRow() {    

    var x = document.getElementById("bon").rows.length;
    var table = document.getElementById("bon").getElementsByTagName('tbody')[0];
    var row = table.insertRow(-1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    var cell5 = row.insertCell(4);
    cell1.innerHTML = '<button tabindex="-1" type="button" class="btn red" onclick="javascript:deleteRow('+x+');">'+x+'</button>';
    cell2.innerHTML = '<div class="item form-group form-md-line-input">  <select id="select" class="form-control" name="kdbng[]" required=""><?php
    $i=0;
    while($i<5){ //||$data3=mysqli_fetch_array($tb)
        ?>        <option value="<?php 
        echo $i;//echo $data3['id_bahan'] ?>"><?php 
        echo chr($i+65);//echo $data3['nama_bahan']?></option> <?php  
        $i++;
        }  ?> </select></div>';
    cell3.innerHTML = '<div class="item form-group form-md-line-input">   <input type="number" min="1" class="form-md-line-input form-control qtbng" name="hrbng[]" required="" data-validate-minmax="1,10000000000"></div>';
    cell4.innerHTML = '<div class="item form-group form-md-line-input">   <input type="number" min="1" class="form-md-line-input form-control qtbng" name="qtbng[]" required="" data-validate-minmax="1,10000000000"></div>';

    var values = $("select[name='kdbng[]']").map(function(){return $(this).val();}).get();
    $("select[name='kdbng[]']").each(function (index){
        //processing the last row
        if(index==($("select[name='kdbng[]']").length-1)){
            //void for the first click
            if($("select[name='kdbng[]']").length>1){
                for(i=0;i<(values.length-1);i++){
                    $(this).children("[value="+values[i]+"]").remove();
                } 
            }   //end of if for escape the first click

        }//end of processing the last row

    });
    console.log($("select[name='kdbng[]']").map(function(){return $(this).val();}).get());
}
</script>
<!-- language: lang-html -->

<table class="table table-hover table-light" id="bon">
<thead>
<tr class="uppercase">
<th width="10%"> # </th>
<th width="30%">Nama Bahan Baku</th>
<th width="30%">Harga</th>
<th width="30%">Jumlah (Kg)</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<a  href="javascript:addRow();"><button type="button" class="btn btn-primary">+</button></a>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

它将得到以下结果：