javascript - 我如何防止动态 javascript 下拉列表中的双重选择

Question

我同时使用 javascript 和 laravel 来操作表单。

Laravel 从数据库中获取值以填充表单和 javascript 添加动态下拉列表以允许多个条目..

一切正常，除了现在我需要添加一个新任务以防止双重选择，即在我选择了一个名称之后，我应该无法在下一个动态下拉列表中选择它。

$(document).ready(function() {
  var postURL = "http://localhost/bcwater/public/addmore";
  var i = 1;

  $('.addRow').on('click', function() {
    i++;
    addRow();
  });

  function addRow() {
    var tr = '<tr class="dynamic-added">' +
      '<td>' +
      '<select ng-model="marketers" id="marketers" class="form-control marketers" name="marketers[]">' +
      '<option value="">Select Marketer </option>	 @foreach($marketers as $data)' +
      '<option value="{{$data->first_name}}">{{$data->first_name}} {{ $data->last_name }}</option> @endforeach' +
      '</select>' +
      '</td>' +
      '<td><input type="text" name="target[]"  id="target' + i + '" class="form-control" oninput="calc()" /> </td>' +
      '<td><span id="result' + i + '">0</span> </td>' +
      '<td> <a href="#" class="btn btn-danger remove">- </a> </td>' +

      '</tr>';
    $('tbody').append(tr);
  };

  $('tbody').on('click', '.remove', function() {
    $(this).parent().parent().remove();
  });



});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <select ng-model="marketers" class="form-control marketers" name="marketers[]" required ng-init="marketers = '{{ old('marketers') }}'">
          <option value="">Select Marketer </option>
          @foreach($marketers as $data)
          <option value="{{$data->first_name}}">{{$data->first_name}} {{ $data->last_name }}</option>
          @endforeach
        </select>
      </td>

      <td>
        <input type="text" name="target[]" class="form-control target" id="target" oninput="calc()">
      </td>
      <td><span id="sum1" onchange="calc()">0</span> </td>
      <td> <a href="#" class="btn btn-danger remove">- </a> </td>
    </tr>
  </tbody>
</table>

标签： javascriptjquerylaravel