Блог

Главная - Вопросы по программированию - Запретить выбор одного и того же значения в нескольких выпадающих списках работает нормально, но после нажатия кнопки добавить / Удалить функция предотвращения дублирования не работает

Запретить выбор одного и того же значения в нескольких выпадающих списках работает нормально, но после нажатия кнопки добавить / Удалить функция предотвращения дублирования не работает

#javascript

Вопрос:

У меня есть список из шести интерфейсов в меню опций , но в будущем он может быть увеличен.Я хочу, чтобы, когда кто-то нажимает кнопку «Добавить», он показывал только список интерфейсов rest, которые ранее не были выбраны в меню опций.

 $(document).ready(function() {
  var maxField = 3; //Input fields increment limitation
  var addButton = $('.add_button'); //Add button selector
  var wrapper = $('.field_wrapper'); //Input field wrapper
  var fieldHTML = '<div>'  
    '<select name="name[]" class="select">'  
    '<option value="">Select</option>'  
    ' <option value="eth0">eth0</option> '  

    '<option value="eth1">eth1</option>'  

    '<option value="eth2">eth2</option>'  
    '<option value="eth3">eth3</option>'  
    '<option value="eth4">eth4</option>'  

    '<option value="eth5">eth5</option>'  
    '<option value="eth6">eth6</option>'  

    '</select>'  


    '<select name="name[]" class="select">'  
    '<option value="">Select</option>'  
    ' <option value="eth0">eth0</option> '  

    '<option value="eth1">eth1</option>'  

    '<option value="eth2">eth2</option>'  
    '<option value="eth3">eth3</option>'  
    '<option value="eth4">eth4</option>'  

    '<option value="eth5">eth5</option>'  
    '<option value="eth6">eth6</option>'  

    '</select><a href="javascript:void(0);" class="remove_button">Delete</a></div>'; //New input field html 

  var x = 1; //Initial field counter is 1

  //Once add button is clicked
  $(addButton).click(function() {
    //Check maximum number of input fields
    if (x < maxField) {
      x  ; //Increment field counter
      $(wrapper).append(fieldHTML); //Add field html
    }
  });

  //Once remove button is clicked
  $(wrapper).on('click', '.remove_button', function(e) {
    e.preventDefault();
    $(this).parent('div').remove(); //Remove field html
    x--; //Decrement field counter
  });
});

$('select').change(function() {
  var myOpt = [];
  $("select").each(function() {
    myOpt.push($(this).val());
  });
  $("select").each(function() {
    $(this).find("option").prop('hidden', false);
    var sel = $(this);
    $.each(myOpt, function(key, value) {
      if ((value != "") amp;amp; (value != sel.val())) {
        sel.find("option").filter('[value="'   value   '"]').prop('hidden', true);
      }
    });
  });
}); 
 <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div class="container" style="  padding:30px;">
  <form method="post" action="dashboard.php">
    <div class="row">
      <div class="col-sm-6">
        <div class="form-group">
          <label for="email"> Interface</label>
          <select name="name[]" class="select">
            <option value="">Select</option>
            <option value="eth0">eth0</option>
            <option value="eth1">eth1</option>
            <option value="eth2">eth2</option>
            <option value="eth3">eth3</option>
            <option value="eth4">eth4</option>
            <option value="eth5">eth5</option>
            <option value="eth6">eth6</option>
          </select>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-3">
        <hr>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6">
        <div class="field_wrapper">
          <div>
            <select name="name[]" class="select">
              <option value="">Select Pair</option>
              <option value="eth0">eth0</option>
              <option value="eth1">eth1</option>
              <option value="eth2">eth2</option>
              <option value="eth3">eth3</option>
              <option value="eth4">eth4</option>
              <option value="eth5">eth5</option>
              <option value="eth6">eth6</option>
            </select>
            <select name="name[]" class="select">
              <option value="">Select Pair</option>
              <option value="eth0">eth0</option>
              <option value="eth1">eth1</option>
              <option value="eth2">eth2</option>
              <option value="eth3">eth3</option>
              <option value="eth4">eth4</option>
              <option value="eth5">eth5</option>
              <option value="eth6">eth6</option>
            </select><br>
            <select name="name[]" class="select">
              <option value="">Select Pair</option>
              <option value="eth0">eth0</option>
              <option value="eth1">eth1</option>
              <option value="eth2">eth2</option>
              <option value="eth3">eth3</option>
              <option value="eth4">eth4</option>
              <option value="eth5">eth5</option>
              <option value="eth6">eth6</option>
            </select>
            <select name="name[]" class="select">
              <option value="">Select Pair</option>
              <option value="eth0">eth0</option>
              <option value="eth1">eth1</option>
              <option value="eth2">eth2</option>
              <option value="eth3">eth3</option>
              <option value="eth4">eth4</option>
              <option value="eth5">eth5</option>
              <option value="eth6">eth6</option>
            </select>
            <a href="javascript:void(0);" class="add_button" title="Add field">Add</a>
          </div>
        </div>
      </div>
      <div class="col-sm-3"></div>
      <div class="col-sm-3"></div>
    </div>
  </form>
</div>

Я перепробовал много вещей, но ничего не вышло. Пожалуйста, помогите мне решить эту проблему.

Комментарии:

1.это не очень полезное описание проблемы , я перепробовал много вещей, но ничего не вышло. Пожалуйста, сузьте свой вопрос, указав на вашу лучшую попытку и объяснив, как она не удалась, и чего вы ожидаете вместо этого.

2. Не имеет никакого отношения к вашему вопросу, но рассмотрите возможность использования a <button> , а не якоря с an href="javascript:void(0);" . Если только этот якорь не должен привести вас на другую страницу, он должен быть кнопкой с type="button" .

3. Спасибо, я изменю это, но теперь мне нужно, чтобы функция предотвращения дублирования работала после нажатия на ссылку добавить.

Ответ №1:

Проблема здесь в том, что ваше недавно созданное select событие «Не назначать изменение».

Вместо

 $('select').change(function() {
   ...
});

Попробуй

 $(document).on('change', 'select', function(){
   ...
});

Комментарии:

1. Я пытался, но все равно это не работает

Метки: ,