JS Отключить в select 2 значение выбранное в select 1 и наоборот

290

21 сентября 2017, 15:50

Есть два списка (с мультивыбором) разной направленности но с одинаковым содержимым, если пользователь выбирает что-то в одном, то в другом он уже это не может выбрать, например:

список - люди, которые пришли
список - люди, которые не пришли

Но оба они содержат одинаковый список этих самых людей, и нужно выбрать.
Нашел на просторах похожий пример, но так и не могу разобраться как он работает и как его использовать в своих целях

Ссылка на пример

Что есть у меня (CakePHP 3):

echo $this->Form->control('commission_members_present',['class'=>"chosen-select",
                                                                    'options'=>$commission_members,
                                                                    'multiple'=>true  ]);
echo $this->Form->control('commission_members_absent',['class'=>"chosen-select",
                                                                    'options'=>$commission_members,
                                                                    'multiple'=>true  ]);

Здесь можно посмотреть, что получается.

И как пример применить к моему случаю не понимаю... объясните пожалуйста или подскажите.

Answer 1

Вот. уже сделанный. Взял часть с примера который готовый.

<div class="form-group select required">
<label class="control-label" for="commission-members-present">Члены комиссии, присутствующие</label>
<input type="hidden" name="commission_members_present" value=""/>
<select name="commission_members_present[]" multiple="multiple" class="chosen-select form-control" required="required" id="commission-members-present">
    <option value="4">фио1</option>
    <option value="5">фио2</option>
</select>
</div>
<div class="form-group select required">
<label class="control-label" for="commission-members-absent">Члены комиссии, отсутствующие</label>
<input type="hidden" name="commission_members_absent" value=""/>
<select name="commission_members_absent[]" multiple="multiple" class="chosen-select form-control" required="required" id="commission-members-absent">
    <option value="4">фио1</option>
    <option value="5">фио2</option>
</select>

    $(".chosen-select").chosen({
        max_selected_options: 5,
    no_results_text: "Oops, nothing found!",
    width: "95%"
    });
 $(document).on('change','select.chosen-select',function() {
          var s = $('select.chosen-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);
                    s.trigger("chosen:updated");
      });

https://jsfiddle.net/5w8w4yb0/1/