jQuery: обнаружение дубликата в избранном и отображение оповещения - PullRequest
0 голосов
/ 02 декабря 2019

Код ниже имеет выбор с тремя вариантами. Когда вы выбираете один из параметров и нажимаете кнопку «Добавить», параметр добавляется в таблицу. Если бы пользователь попытался выбрать ту же опцию, мне нужно было бы появиться окно предупреждения или модальное окно с надписью «Дубликаты не допускаются».

У кого-нибудь есть идеи, как этого добиться?

 $("select#keys").change(function(){

     $("#add-user-code").click(function(){
  	var selectedKey = $("#keys").val();
  	$("#3rd-row").show();
   	$('#example').html('<span class="lbl">' + selectedKey + '&nbsp;</span>');   
     });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<select class="select-duc" id="keys">
        <option></option>          
        <option>Allergies</option>
        <option>Animals</option>
      <option>Coughing</option> 
 </select>
 
<button type="button" id="add-user-code" class="btn btn-default pull-right" data-dismiss="modal">Add User Code</button>
      
 
  <div class="col-sm-6 reset">
	   <div class="details-page-container two">
	<h5>User Codes</h5>
	<div class="table-container">
	 <table>
	<tbody><tr>
	<th><strong>Code</strong></th>
	<th><strong>Description</strong></th>
	<th><strong>Domain</strong></th>
	<th><strong>Start Date</strong></th>
	<th><strong>End Date</strong></th>
	<th><strong>Delete</strong></th>
	</tr>
	<tr>
	<td>01</td>
	<td>MINNEAPOLIS</td>
	<td>MN</td>
	<td>11/01/2019</td>
	<td></td>
	<td><a href="#">Delete</a></td>
	</tr>
	<tr>
	<td>02</td>
	<td>MINNEAPOLIS</td>
	<td>MN</td>
	<td>11/01/2019</td>
	<td></td>
	<td><a href="#">Delete</a></td>
	</tr>
  <tr id="3rd-row" class="hideIT">
	<td id="example"></td>
	<td>MINNEAPOLIS</td>
	<td>MN</td>
	<td>11/01/2019</td>
	<td>12/01/2019</td>
	<td><a data-toggle="modal" data-target="#myModal2" href="#">Delete</a></td>
	</tr>
	</tbody>
    </table>
    </div>
    </div>
    </div>

 
 
</body>
</html>

Ответы [ 3 ]

0 голосов
/ 02 декабря 2019

Я бы лучше просто скрыл параметр дубликатов, когда тот выбран, и покажите их обратно, когда / если он не выбран, для лучшего взаимодействия с пользователем. В противном случае, вы можете создать массив выбранных значений и пройти через него при выбранной опции, что-то вроде этого:

     var selectedOptions = [];
     $("select#keys").change(function(){

     $("#add-user-code").click(function(){
     var selectedKey = $("#keys").val();
     if($.inArray(selectedKey, selectedOptions)) {
        alert ("Duplicate values are not allowed");
      } else {
         selectedOptions.push(selectedKey);
      }
      $("#3rd-row").show();
      $('#example').html('<span class="lbl">' + selectedKey + '&nbsp;</span>');   
      });  
});

Тем не менее, его необходимо сбросить, когда опции не выбраны, я не вижу несколькоопции в вашем фрагменте, хотя

0 голосов
/ 02 декабря 2019

Я не думаю, что вам нужно связывание .click() внутри связывания .change(). Кроме того, вместо использования оповещения вы можете просто сделать эту опцию недоступной.

$("#add-user-code").click(function(){
  $('#example').html('<span class="lbl">' + $('#keys option:selected').hide().text() + '&nbsp;</span>');
  $("#3rd-row").show();
  $('#keys option:eq(0)').prop('selected', 'selected'); //set the select back to the blank option
});

Тогда, если вы нажмете кнопку удаления:

$('a').click(function() {
  let example = $('#example .lbl').text().trim();
  $('#keys option').filter(function() {return this.textContent === example; }).show();
  $("#3rd-row").hide();
});

Вам не нужен массив или функциядобиться того, что вы после. https://jsfiddle.net/g9523ysz/

Если вам действительно нужно предупреждение:

$("#add-user-code").click(function(){
  let option = $('#keys option:selected').text();

  if (option) {
    if ($('td').filter(function() { return $(this).find('.lbl').text().trim() === option; }).length){
      alert('Duplicates not allowed.');
    } else {
      $("#3rd-row").show();
      $('#example').html('<span class="lbl">' + option + '&nbsp;</span>');
    }
  }
});

Я бы предложил, если вы можете, использовать более конкретный класс для диапазона, например lbl-user-code. Тогда вместо того, чтобы проверять каждый td, вы можете:

if ($('.lbl-user-code').filter(function() { return this.textContent === option; }).length) { ... }

https://jsfiddle.net/9us4d08j/

0 голосов
/ 02 декабря 2019

Определите массив и в функции $ ("# add-user-code"). Click: проверьте, присутствует ли значение (которое выбрал пользователь) в массиве или нет (для отображения предупреждения), нажмитеиндекс / значение в массиве после добавления его в вашу таблицу (чтобы в следующий раз условие не сработало и появилось предупреждение).

Кроме того, не забывайте при необходимости удалять элементы из массива (пользователь запускается снова или элемент удаляется из таблицы) /

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...