Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.04.2015, 15:30
Новичок на форуме
Отправить личное сообщение для emulexx Посмотреть профиль Найти все сообщения от emulexx
 
Регистрация: 02.09.2013
Сообщений: 5

Проверка нескольких 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, и тут должна выходить ошибка, что нельзя такой выбирать?
Ответить с цитированием
  #2 (permalink)  
Старый 06.04.2015, 15:36
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 9,638

Если нельзя выбрать в N наборах одинаковые значения, то зачем эти наборы добавляются? По идее у вас должен быть всего один список со множественным выбором, а не куча с одним выбором в каждом.
Ответить с цитированием
  #3 (permalink)  
Старый 06.04.2015, 15:56
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,151

Сообщение от emulexx
Как определить, что в разных select выбраны одинаковые значения
Лучше не "определять одинаковые", а показывать допустимые... Зачем показывать то, что выбрать нельзя?
Ответить с цитированием
  #4 (permalink)  
Старый 06.04.2015, 16:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,053

отключение 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>
Ответить с цитированием
  #5 (permalink)  
Старый 07.04.2015, 00:44
Новичок на форуме
Отправить личное сообщение для emulexx Посмотреть профиль Найти все сообщения от emulexx
 
Регистрация: 02.09.2013
Сообщений: 5

рони,
Спасибо, то что надо!
Ответить с цитированием
  #6 (permalink)  
Старый 07.04.2015, 16:10
Новичок на форуме
Отправить личное сообщение для emulexx Посмотреть профиль Найти все сообщения от emulexx
 
Регистрация: 02.09.2013
Сообщений: 5

рони,
Начал прикручивать к себе Ваш способ, но получается не до конца то, что требуется. У Вас уже заранее созданы три select, и в них мы блокируем выбираемые option, а как же быть с динамически создаваемыми select, как в новом списке заблокировать те выбранные значения в предыдущих select-ах?
Ответить с цитированием
  #7 (permalink)  
Старый 07.04.2015, 16:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,053

emulexx,
после создания $('select').change();
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вывести значения value из select в input Jeick9 Events/DOM/Window 28 29.11.2017 08:57
Получение данных из нескольких select с одним name psfdek Элементы интерфейса 11 18.03.2015 11:24
Изменение цвета шрифта выбранного значения select AlexG88 Элементы интерфейса 15 16.03.2015 10:33
изменение значения input при смене значения select galart jQuery 4 30.01.2015 19:39
Как в oninput получить значения select? Jeick9 Events/DOM/Window 9 11.10.2014 20:18