Вход

Просмотр полной версии : Проверка нескольких select на одинаковые значения


emulexx
06.04.2015, 14:30
Добрый день!

Имеется 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, и тут должна выходить ошибка, что нельзя такой выбирать?

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

ksa
06.04.2015, 14:56
Как определить, что в разных select выбраны одинаковые значения
Лучше не "определять одинаковые", а показывать допустимые... ;) Зачем показывать то, что выбрать нельзя?

рони
06.04.2015, 15:38
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>

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

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

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