Javascript-форум - Проверка нескольких select на одинаковые значения

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Проверка нескольких select на одинаковые значения (https://javascript.ru/forum/misc/54917-proverka-neskolkikh-select-na-odinakovye-znacheniya.html)

Проверка нескольких select на одинаковые значения

Добрый день!

Имеется select и поле input

<div id="alt_contact_div">
   <div class="alt_contact">
      <select name="alt_contact_sel" class="alt_contact_sel">
         <option value="0">&mdash;Выбрать&mdash;</option>
         <option value="1">Skype</option>
         <option value="2">ICQ</option>
         <option value="3">Mail.ru Агент</option>
         <option value="4">Вконтакте</option>
         <option value="5">Twitter</option>
         <option value="6">Facebook</option>
         <option value="7">Google+</option>
         <option value="8">LinkedIn</option>
         <option value="9">Github</option>
      </select>
      <input size="30" name = "site" class="input_alt_contact1" value="адрес или номер аккаунта" disabled = "disabled" type="text" maxlength="255" />
   </div>
</div>
<a href="javascript:void(0);" id="add_link" class="link" title="Добавить ссылку">+ Добавить ссылку</a>

С помощью JS динамически создаю аналогичные select и input по нажатию на ссылку

$("#add_link").live("click", function(e){
// тут функция добавления новых select и input. Количество добавляемых полей ограничено до 9-ти.
});

var arr = []; // создаем пустой массив для записи ранее выбранных значений select

$(".alt_contact_sel").live("change", function(e){
        var contact_sel = $(this).val();
       if($(this).val()==0) // если значение равно 0, то блокируем input и меняем val
	{
		$(this).next().val("адрес или номер аккаунта");
		$(this).next().attr("disabled","disabled");
	}
	else // иначе
	{
		var pos = $.inArray (contact_sel, arr); // ищем выбранное значение в массиве arr
		if(pos>=0) // если оно есть, то выводим ошибку
		{
			alert("Данный алтернативный источник уже выбран");
		}
		else //если нет, то
		{
                   arr.push(contact_sel); // добавляем в массив новое значение
		}
		$(this).next().removeAttr("disabled"); // разблокируем input
	}
});

Такой способ не решает мою задачу. При повторном выборе одного и того же select получается так, что скрипт добавляет и добавляет значения в массив, и если я снова выберу значение которое выбирал раньше этим же select, появляется моя ошибка (alert), хотя у других select это значение не выбрано.

Вопрос к знатокам. Как определить, что в разных select выбраны одинаковые значения, например, я в первом select выбрал Skype, во втором ICQ, в третьем хочу снова выбрать Skype, и тут должна выходить ошибка, что нельзя такой выбирать?

Если нельзя выбрать в N наборах одинаковые значения, то зачем эти наборы добавляются? По идее у вас должен быть всего один список со множественным выбором, а не куча с одним выбором в каждом.

Цитата:

Сообщение от emulexx

Как определить, что в разных select выбраны одинаковые значения

Лучше не "определять одинаковые", а показывать допустимые... ;) Зачем показывать то, что выбрать нельзя?

отключение option с одинаковым value в других select

emulexx,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       $(document).on('change','select',function() {
          var s = $('select'),
          val = +this.value, data = $(this).data('val');
          s.not(this).each(function(indx, el){
          data &&  $('option[value="'+data+'"]', el).prop('disabled', false)
          val && $('option[value="'+val+'"]', el).prop('disabled', true)
                  });
          $(this).data({val:val});
          $(this).next().val(val);
      });
});


  </script>
</head>

<body>
<div id="alt_contact_div">
   <div class="alt_contact">
      <select name="alt_contact_sel" class="alt_contact_sel">
         <option value="0">&mdash;Выбрать&mdash;</option>
         <option value="1">Skype</option>
         <option value="2">ICQ</option>
         <option value="3">Mail.ru Агент</option>
         <option value="4">Вконтакте</option>
         <option value="5">Twitter</option>
         <option value="6">Facebook</option>
         <option value="7">Google+</option>
         <option value="8">LinkedIn</option>
         <option value="9">Github</option>
      </select>
      <input size="30" name = "site" class="input_alt_contact1" value="адрес или номер аккаунта" disabled = "disabled" type="text" maxlength="255" />
   </div>
</div>
<a href="javascript:void(0);" id="add_link" class="link" title="Добавить ссылку">+ Добавить ссылку</a>

<div id="alt_contact_div">
   <div class="alt_contact">
      <select name="alt_contact_sel" class="alt_contact_sel">
         <option value="0">&mdash;Выбрать&mdash;</option>
         <option value="1">Skype</option>
         <option value="2">ICQ</option>
         <option value="3">Mail.ru Агент</option>
         <option value="4">Вконтакте</option>
         <option value="5">Twitter</option>
         <option value="6">Facebook</option>
         <option value="7">Google+</option>
         <option value="8">LinkedIn</option>
         <option value="9">Github</option>
      </select>
      <input size="30" name = "site" class="input_alt_contact1" value="адрес или номер аккаунта" disabled = "disabled" type="text" maxlength="255" />
   </div>
</div>
<a href="javascript:void(0);" id="add_link" class="link" title="Добавить ссылку">+ Добавить ссылку</a>
<div id="alt_contact_div">
   <div class="alt_contact">
      <select name="alt_contact_sel" class="alt_contact_sel">
         <option value="0">&mdash;Выбрать&mdash;</option>
         <option value="1">Skype</option>
         <option value="2">ICQ</option>
         <option value="3">Mail.ru Агент</option>
         <option value="4">Вконтакте</option>
         <option value="5">Twitter</option>
         <option value="6">Facebook</option>
         <option value="7">Google+</option>
         <option value="8">LinkedIn</option>
         <option value="9">Github</option>
      </select>
      <input size="30" name = "site" class="input_alt_contact1" value="адрес или номер аккаунта" disabled = "disabled" type="text" maxlength="255" />
   </div>
</div>
<a href="javascript:void(0);" id="add_link" class="link" title="Добавить ссылку">+ Добавить ссылку</a>


</body>

</html>

рони,
Спасибо, то что надо! :)

рони,
Начал прикручивать к себе Ваш способ, но получается не до конца то, что требуется. У Вас уже заранее созданы три select, и в них мы блокируем выбираемые option, а как же быть с динамически создаваемыми select, как в новом списке заблокировать те выбранные значения в предыдущих select-ах?

emulexx,
после создания $('select').change();