-1

我已经尝试禁用它option。但是当它已经选择时它没有。selectselecteddisable

下面是queryfor select option，可以创建dynamically。

    var count = 0;
    $(document).on('click', '#add', function () {

        count++;
        var html = '';
        html += '<tr id="trrows">';

        html += '<td id="medicinename"> <select name="med_name[]" id="med_name[]" class="form-control med_name" ><option value=""> Select Medicine</option> <?php echo fill_select_box($conn, "0");  ?></select></td>';
        html += '<td id="mor"> <input type="text" name="morning[]" id="morning[]" class="form-control morning" /> </td>';
        html += '<td id="noo"> <input type="text" name="noon[]" id="noon[]" class="form-control noon" /> </td>';
        html += '<td id="nigh"> <input type="text" name="night[]" id="night[]" class="form-control night" /> </td>';
        html += '<td id="period"> <input type="text" name="period[]" id="period[]" class="form-control period" /> </td>';
        html += '<td> <button type="button" name="remove" id="remove" class="btn btn-danger btn-xs remove" >  -  </button> </td>';
        html += '</tr>';

        $('#rows').append(html);
    });

    $(document).on('click', '.remove', function () {
        $(this).closest("#trrows").remove();
    });

下面是queryfordisable上的选择选项(med_name[])，

  $('select[name*="med_name[]"]').change(function(){
  $('select[name*="med_name[]"] option').attr('disabled',false);
  $('select[name*="med_name[]"]').each(function(){
    var $this = $(this);
    $('select[name*="med_name[]"]').not($this).find('option').each(function(){
       if($(this).attr('value') == $this.val())
           $(this).attr('disabled',true);
    });
});

});

下面是HTML，

<table class="table table-bordered mb-0" id="medical">
    <thead>
       <tr>
           <th>Medicine Name</th>
           <th>Morning</th>
           <th>Noon</th>
           <th>Night</th>
           <th>Period</th>
       </tr>
     </thead>
      <tbody id="rows">
         </tbody>
   </table>
       <br><br>

   <div align="right">
   <button type="button" name="add" id="add" class="btn btn-success btn xs"> + </button>
      </div>

我不知道我哪里错了。我怎样才能做到这一点？任何帮助都将受到高度赞赏。

4

2 回答 2

0

这是非常基本的实现

$('select').change(function() {
    
    var value = $(this).val();
 
    $(this).children('option').each(function() {
        if ( $(this).val() === value ) {
            $(this).attr('disabled', true).siblings().removeAttr('disabled');   
        }
    });
    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option value=1> Option 1 </option>
  <option value=2> Option 1 </option>
  <option value=3> Option 1 </option>
</select>

编辑：这是您的示例

var count = 0;
    $(document).on('click', '#add', function () {
        count++;
        var html = '';
        html += '<tr id="trrows">';

        html += '<td id="medicinename"> <select name="med_name[]" id="med_name[]" class="form-control med_name" ><option value=""> Select Medicine</option> <?php echo fill_select_box($conn, "0");  ?></select></td>';
        html += '<td id="mor"> <input type="text" name="morning[]" id="morning[]" class="form-control morning" /> </td>';
        html += '<td id="noo"> <input type="text" name="noon[]" id="noon[]" class="form-control noon" /> </td>';
        html += '<td id="nigh"> <input type="text" name="night[]" id="night[]" class="form-control night" /> </td>';
        html += '<td id="period"> <input type="text" name="period[]" id="period[]" class="form-control period" /> </td>';
        html += '<td> <button type="button" name="remove" id="remove" class="btn btn-danger btn-xs remove" >  -  </button> </td>';
        html += '</tr>';

        $('#rows').append(html);
    });


    function addRow(rowIndex) {
        count++;
        var html = '';
        html += '<tr id="trrows">';

        html += '<td id="medicinename"> <select name="med_name[' + rowIndex + ']" id="med_name[]" class="form-control med_name" ><option value=""> Select Medicine</option><option value="1"> Select Medicine1</option><option value="2"> Select Medicine2</option> </select></td>';
        html += '<td id="mor"> <input type="text" name="morning[]" id="morning[]" class="form-control morning" /> </td>';
        html += '<td id="noo"> <input type="text" name="noon[]" id="noon[]" class="form-control noon" /> </td>';
        html += '<td id="nigh"> <input type="text" name="night[]" id="night[]" class="form-control night" /> </td>';
        html += '<td id="period"> <input type="text" name="period[]" id="period[]" class="form-control period" /> </td>';
        html += '<td> <button type="button" name="remove" id="remove" class="btn btn-danger btn-xs remove" >  -  </button> </td>';
        html += '</tr>';

        $('#rows').append(html);
    }


    addRow(1);
    addRow(2);
    addRow(3);
    
 $('select[name*="med_name"]').change(function() {
    
    var value = $(this).val();
 
    $(this).children('option').each(function() {
        if ( $(this).val() === value ) {
            $(this).attr('disabled', true).siblings().removeAttr('disabled');   
        }
    });
    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id=rows>

</table>

于 2021-07-30T11:23:27.133 回答
0

这是一个工作示例，请检查

我已经更新了一些 js 代码以使其工作。

    var count = 0;
    $(document).on('click', '#add', function () {

        count++;
        var html = '';
        html += '<tr id="trrows">';

        html += '<td id="medicinename"> <select name="med_name[]" id="med_name[]" class="form-control med_name" ><option value=""> Select Medicine</option> <option value="1"> Option 1 </option><option value="2"> Option 2 </option><option value="3"> Option 3 </option><option value="4"> Option 4 </option><option value="5"> Option 5 </option></select></td>';
        html += '<td id="mor"> <input type="text" name="morning[]" id="morning[]" class="form-control morning" /> </td>';
        html += '<td id="noo"> <input type="text" name="noon[]" id="noon[]" class="form-control noon" /> </td>';
        html += '<td id="nigh"> <input type="text" name="night[]" id="night[]" class="form-control night" /> </td>';
        html += '<td id="period"> <input type="text" name="period[]" id="period[]" class="form-control period" /> </td>';
        html += '<td> <button type="button" name="remove" id="remove" class="btn btn-danger btn-xs remove" >  -  </button> </td>';
        html += '</tr>';

        $('#rows').append(html);
    });

    $(document).on('click', '.remove', function () {
        $(this).closest("#trrows").remove();
    });
    
    $(document).on('click', 'select.med_name', function () {
      $('select[name*="med_name[]"] option').attr('disabled',false);
      $('select[name*="med_name[]"]').each(function(){
        var $this = $(this);
        $('select[name*="med_name[]"]').not($this).find('option').each(function(){
             if($(this).attr('value') == $this.val())
             $(this).attr('disabled',true);
        });
      });
    });
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Title of the document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

  <table class="table table-bordered mb-0" id="medical">
     <thead>
       <tr>
           <th>Medicine Name</th>
           <th>Morning</th>
           <th>Noon</th>
           <th>Night</th>
           <th>Period</th>
       </tr>
     </thead>
     <tbody id="rows">
     </tbody>
   </table>
   <br><br>

   <div align="right">
      <button type="button" name="add" id="add" class="btn btn-success btn xs"> + </button>
   </div>

</body>
</html>

于 2021-07-30T13:27:07.997 回答