0

Given two <select> dropdown lists with same options and values, I want to disable the value selected in one dropdown, in the other dropdown.

This is my HTML code:

<span>Sender:</span>
<select required name="Sender">
  <option selected disabled value="Select one">Select one</option>
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
  <option value="5">E</option>
</select>
<span>Receiver:</span>
<select required name="Receiver">
  <option selected disabled value="Select one">Select one</option>
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
  <option value="5">E</option>
</select>

So when I e.g. select A (1) in Sender, it is disabled in Receiver, so that the user can't select the same person in that form (since it doesn't make sense).

alejnavab
  • 1,136
  • 1
  • 12
  • 30
  • I don't see the point of you asking a question when you already have the answer. You answered your own question almost the same time you asked it. :) – Eddie Apr 27 '18 at 18:13
  • That was my purpose. I activated the _Answer your own question_ option. – alejnavab Apr 30 '18 at 05:15
  • I mean dont get me wrong, there is nothing wrong if you answer your own question. What is weird here is that you answered your question **almost** the same time you posted the question. It seems that you already have the answer before you even posted the question. My question to you is, if you already have the answer, why bother ask? – Eddie Apr 30 '18 at 05:32
  • And on your answer you used the pronoun **you**, seems like you are giving instruction to your own self. Just weird for me. – Eddie Apr 30 '18 at 05:34
  • 1
    @Eddie it is acceptable to answer your own question. There is a checkbox that asks if you wish to answer your own question. – mickmackusa Aug 05 '18 at 12:11
  • Possible duplicate of [Disable 2nd dropdown option based on first dropdown](https://stackoverflow.com/questions/31609378/disable-2nd-dropdown-option-based-on-first-dropdown) – mickmackusa Aug 05 '18 at 12:27
  • 1
    While it is noble to offer your knowledge as a self-resolving Q&A, this is actually a duplicate of many, many questions on this site... https://stackoverflow.com/q/24909907/2943403 and https://stackoverflow.com/q/41824435/2943403 and https://stackoverflow.com/q/8672099/2943403 and many more. It would have been better for the site if you found a suitable pre-existing question and posted your answer there. – mickmackusa Aug 05 '18 at 12:30
  • @mickmackusa Got it. – alejnavab Aug 05 '18 at 19:21

1 Answers1

0

Using jQuery, you can call a function whenever any form (independently) changes, then allow enable all options except the one selected in the other <select> dropdown list. Keep in mind we also have to re-enable the previously disabled option.

// When the user selects an option in "Sender" dropdown selection, this function disables in the "Receiver" dropdown selection the person selected in the other dropdown
 $('[name="Sender"]').change(function () { 
  console.log("Sender changed to value "+this.value+"!");
  $('[name="Receiver"]>option').removeAttr("disabled");
  $('[name="Receiver"]>option[value="Select one"]').attr("disabled","disabled");
  $('[name="Receiver"]>option[value="'+this.value+'"]').attr("disabled","disabled");
 });

// When the user selects an option in "Receiver" dropdown selection, this function disables in the "Sender" dropdown selection the person selected in the other dropdown
 $('[name="Receiver"]').change(function () { 
  console.log("Receiver changed to value "+this.value+"!");
  $('[name="Sender"]>option').removeAttr("disabled");
  $('[name="Sender"]>option[value="Select one"]').attr("disabled","disabled");
  $('[name="Sender"]>option[value="'+this.value+'"]').attr("disabled","disabled");
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><strong>Note: you can't select the same person.</strong></p>
<span>Sender:</span>
<select required name="Sender">
  <option selected disabled value="Select one">Select one</option>
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
  <option value="5">E</option>
</select>
<span>Receiver:</span>
<select required name="Receiver">
  <option selected disabled value="Select one">Select one</option>
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
  <option value="5">E</option>
</select>
alejnavab
  • 1,136
  • 1
  • 12
  • 30