0

Имеет несколько select-элементов в форме такого вида введите сюда описание изображения

с соответствующим кодом:

<label for="districts"></label>
<select multiple="multiple" id="districts" name="districts">
    <option value="191"></option>
    <option value="195"></option>
    ...
</select>
<label for="region"></label>
<select multiple="multiple" id="region" name="region">
    <option value="191"></option>
    <option value="195"></option>
    ...
</select>
<label for="city"></label>
<select multiple="multiple" id="city" name="city">
    <option value="191"></option>
    <option value="195"></option>
    ...
</select>

Подскажите, пожалуйста, как затемнить/сделать неактивными прочие select-элементы при работе с одним, пример на картинке. Соответственно, если элемент не выбран в select, прочие select'ы снова становятся активны

введите сюда описание изображения

2 ответа 2

1

Можно еще вот так попробовать...

$("option").click(function(){
	if($(this).parent().is(':disabled')){
	$("[multiple=multiple]").prop('disabled', false);
	$("option").prop("selected", false);
	}
});

$("select").on('change', function(){
	$("[multiple=multiple]").prop('disabled', true);
	$(this).prop("disabled", false);
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<label for="districts"></label>
<select multiple="multiple" id="districts" name="districts">
  <option value="191">first</option>
  <option value="195">second</option>
  <option value="191">first</option>
  <option value="195">second</option>
</select>
<label for="region"></label>
<select multiple="multiple" id="region" name="region">
  <option value="191">first</option>
  <option value="195">second</option>
  <option value="191">first</option>
  <option value="195">second</option>
</select>

<label for="city"></label>
<select multiple="multiple" id="city" name="city">
  <option value="191">first</option>
  <option value="195">second</option>
  <option value="191">first</option>
  <option value="195">second</option>
</select>

1
  • Спасибо! То, что нужно
    – while1pass
    6 июл 2016 в 11:15
1

Можно делать все select, кроме того, с которым сейчас работаем неактивными. Однако, для "вывода" из disabled необходимо обернуть select в div (например), так как события на неактивных элементах игнорируются браузерами.

Также можно и не использовать disabled, а добавлять/удалять некий класс (.addClass() / .removeClass() / .toggleClass()), который будет стилизовать "не активные" select-ы необходимым образом.

// Если кликнули по "обёртке", в которой есть select
$(".select:has(select)").on("click", function() {
  $("select").attr("disabled", true); // все select - disabled
  $("select", this).removeAttr("disabled"); // "наш" select не disabled
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<label for="districts"></label>
<div class="select">
  <select multiple="multiple" id="districts" name="districts">
      <option value="191">first</option>
      <option value="195">second</option>
      <option value="191">first</option>
      <option value="195">second</option>
  </select>
</div>
<label for="region"></label>

<div class="select">
  <select multiple="multiple" id="region" name="region">
      <option value="191">first</option>
      <option value="195">second</option>
      <option value="191">first</option>
      <option value="195">second</option>
  </select>
</div>

<label for="city"></label>
<div class="select">
<select multiple="multiple" id="city" name="city">
    <option value="191">first</option>
    <option value="195">second</option>
    <option value="191">first</option>
     <option value="195">second</option>
</select>
</div>

C классом всё проще. Никаких "обёрток" не требуется.

$("select").on("click", function() {
  $("select").addClass("disabled");
  $(this).removeClass("disabled");
});
.disabled {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<label for="districts"></label>
<select multiple="multiple" id="districts" name="districts">
  <option value="191">first</option>
  <option value="195">second</option>
  <option value="191">first</option>
  <option value="195">second</option>
</select>
<label for="region"></label>
<select multiple="multiple" id="region" name="region">
  <option value="191">first</option>
  <option value="195">second</option>
  <option value="191">first</option>
  <option value="195">second</option>
</select>

<label for="city"></label>
<select multiple="multiple" id="city" name="city">
  <option value="191">first</option>
  <option value="195">second</option>
  <option value="191">first</option>
  <option value="195">second</option>
</select>

3
  • Спасибо. Только прочие селекты остаются доступны для выбора, и человек может с ними работать. А если их скрывать hide'ом?
    – while1pass
    6 июл 2016 в 10:45
  • Вообще очень похоже, что Вы делаете что-то вроде такого: link. Тогда это совсем другая история. 6 июл 2016 в 10:57
  • Да, похоже. Но изначально логика заложена вот такая странная - я должен выбрать хотя бы один селект, относительно вашего примера неважно какой: страну, область, город - он бы и считался моим выбором
    – while1pass
    6 июл 2016 в 11:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.