Если выбранное значение существует в списке (JQuery) - PullRequest
Новая
       40

Если выбранное значение существует в списке (JQuery)

0 голосов
/ 06 апреля 2019

У меня есть пустой ul и выберите, 

$(document).on("change", "#ogppropoc-select", function() {
  var i = $(this).val();
  if ($("#recipient-list li").length != 0) {
    $("#recipient-list li").each(function() {
      if ($(this).text() != i) {
        $("#recipient-list").append('<li>' + i + '</li>');
      }
    });
  } else {
    $("#recipient-list").append('<li>' + i + '</li>');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="" id="ogppropoc-select" class="form-control">
  <option disabled selected>Choose...</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<ul id="recipient-list"></ul>

Когда номер выбран из выбора, он добавляется в список получателей.Но если выбран номер, который уже существует в списке получателей, он не должен добавляться в список.

Этот код jQuery добавляет номер, но он не контролирует, есть ли такой же номер в списке,Поэтому я могу снова и снова добавлять одни и те же числа.

Вкратце, моя цель - каждое число должно присутствовать в списке только один раз.

Ответы [ 2 ]

2 голосов
/ 06 апреля 2019

Поиск, если уже есть это значение, если нет, то Вставьте его.

Примерно так: 

$(document).on("change", "#ogppropoc-select", function() {
  var i = $(this).val();
  if (!$("#recipient-list li[value='"+i+"']").length) {
    $("#recipient-list").append('<li value="'+i+'">' + i + '</li>');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="" id="ogppropoc-select" class="form-control">
  <option disabled selected>Choose...</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<ul id="recipient-list"></ul>

Ваш вопрос с кодом

У вас есть одно Сбой, если еще Условие 

$(document).on("change", "#ogppropoc-select", function() {
  var i = $(this).val();
  if ($("#recipient-list li").length != 0) {
    // let's say you have selected 1,2,3 and again selected 1
    $("#recipient-list li").each(function() {
      // when i = 1 => Does nothing
      // when i = 2 => Adds Duplicate
      // when i = 3 => Adds Duplicate
      if ($(this).text() != i) {
        $("#recipient-list").append('<li>' + i + '</li>');
      }
    });
  } else {
    $("#recipient-list").append('<li>' + i + '</li>');
  }
});
2 голосов
/ 06 апреля 2019

Я бы сократил ваш код до следующего. Это работает так, что когда опция выбрана, она добавляет к ней атрибут данных. Код сначала проверяет, существует ли атрибут, а если нет, добавляет выбранный параметр в ваш список. 

$(document).on("change", "#ogppropoc-select", function() {
  if (!$(this).find('option[value="' + this.value + '"]').data('used')) $("#recipient-list").append('<li>' + this.value + '</li>');
  $(this).find('option[value="' + this.value + '"]').data('used', true)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="" id="ogppropoc-select" class="form-control">
  <option disabled selected>Choose...</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<ul id="recipient-list"></ul>
...