Два выпадающих списка с неидентичными опциями, которые ограничивают друг друга

У меня есть два выпадающих меню с не идентичными параметрами, но с таким же количеством параметров. Использование javascript (и jQuery 1.11.1) Мне нужно либо выпадающее меню, чтобы ограничить (отключив, а не скрывать) параметры, доступные в другом раскрывающемся списке, до следующего параметра и ниже.Два выпадающих списка с неидентичными опциями, которые ограничивают друг друга

т.е:

<select id="dropdown1"> 
    <option value="0">option1_1</option> ** 
    <option value="0">option1_2</option> ** 
    <option value="1">option1_3</option> **DISABLED** 
    <option value="2">option1_4</option> **DISABLED** 
    <option value="3">option1_5</option> **DISABLED** 
</select> 

<select id="dropdown2"> 
    <option value="0">option2_1</option> **DISABLED** 
    <option value="0">option2_2</option> **DISABLED** 
    <option value="0">option2_3</option> ** 
    <option value="1">option2_4</option> ** 
    <option value="2">option2_5</option> ** 
</select>

Если вариант 2 в dropdown1 выборе опции 1 & 2 из dropdown2 отключены, и только остальные опции доступны в dropdown2 и неиспользованные варианты в dropdown1 также будут отключены. Dropdown2 будет управлять dropdown1 таким же образом, если первоначальный выбор был сделан в dropdown2.

Любая помощь будет оценена по достоинству.

источник

2016-01-18 DDA

Пожалуйста, напишите, что вы пробовали до сих пор. –

Извините, я не указал, что на момент написания статьи я ничего не пробовал, потому что я зациклился на том, как начать (я новичок). Но я только что нашел этот вопрос [link] http://stackoverflow.com/questions/17573893/restricting-range-of-drop-down-lists ответ на который делает то, что я за исключением, за исключением того, что после выбора одного из вариантов в один список - первая оставшаяся опция в другом списке - эквивалентная опция. Мне нужно, чтобы эквивалентная опция была отключена следующей опцией после начала доступных опций. – DDA

$(document).ready(function() { 
     var index; 
     $('#dropdown1').change(function() 
      { 
      $('#dropdown2 option').removeAttr('disabled'); 
      index = $(this).find('option:selected').index() + 1; 
      $('#dropdown2').find("option:lt(" + index + ")").prop("disabled", true); 

      $('#dropdown1').find("option:gt(" + $(this).find('option:selected').index() + ")").prop("disabled", true); 
      index = index -1; 
      $('#dropdown1').find("option:lt(" + index + ")").prop("disabled", true); 
      }); 
    });

источник

2016-01-18 04:44:51 Aswathy

Спасибо @Shriya R. Хотя мне нужно dropdown2, чтобы также управлять dropdown1, поэтому я модифицировал ваш код, чтобы включить управление из dropdown2 в dropdown1, дублируя функцию изменения и заменяя выпадающие имена и, похоже, работает. – DDA

не заметил, что изменение и хотите в dropdown2 :). ты понял? – Aswathy

Не беспокойтесь. Да, я получил это благодаря;) – DDA

Вы можете выполнить это требование, используя disable.

Адрес Fiddle.

$("select#dropdown1 option[value*='1'],select#dropdown1 option[value*='2'],select#dropdown1 option[value*='3'],select#dropdown2 option[value*='0']").prop('disabled',true);

Надеюсь, что это решает вашу проблему.

-Help :)

источник

2016-01-18 04:30:27 Help

Два выпадающих списка с неидентичными опциями, которые ограничивают друг друга

ответ

Смежные вопросы