Ev. Ev. - 5 months ago 8
Javascript Question

How link two chosen fields removing options from each other

I have two fields that have the same options. I want to make sure that when the user selects one option from one of them, the opposite field will have this same option removed.

So, if an user selects T. Edson as

Recipient
, this option will be removed on
CCs
field.

enter image description here

I tried the following as someone said here but doesn't seem to work.

function checkAddressFields() {
var recipientField = $('#id_recipient');
var ccsField = $('#id_ccs');
console.log("Removing duplicate");
$("#id_ccs option[value='"+recipientField.val()+"']").remove();
ccsField.trigger("chosen:updated");
}
$('#id_recipient').on('change', checkAddressFields);
$('#id_ccs').on('change', checkAddressFields);

Prs Prs
Answer

Try this example..

$select = $('.select');
$select.on('change', function() {
  var val = $(this).val();
  $('.select option').show();
  $select.not($(this)).find('option[value=' + val + ']').hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="select">
  <option>Select rec</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
  <option value="option4">Option 4</option>
  <option value="option5">Option 5</option>
</select>

<select class="select">
  <option>Select cc</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
  <option value="option4">Option 4</option>
  <option value="option5">Option 5</option>
</select>