Guruprasad Rao Guruprasad Rao - 6 months ago 29
Javascript Question

Show/hide options from dropdown using jQuery

I have 3 dropdowns which contains more than 4 questions as options in each dropdowns. What I want to achieve is when a user selects one option from any dropdown, that particular option/question has to be hidden from other 2 dropdowns and when he changes his selection that option/question has to be shown again in the other 2 dropdowns. He can select questions from any dropdowns. Here is what I have tried till now. This particular piece of code will hide the options on select but I am not getting how exactly I can show it up back.

Javascript

var removeSelection = function (select) {
$('select').filter(':not(#' + select.attr('id') + ')').each(function () {
var index = select.find(':selected').index();
$(this).find('option:eq(' + index + ')').hide();
});
};

$(function () {
$('select').change(function () {
removeSelection($(this));
});
});


HTML

<form id="form1">
<select id="select1">
<option id="selectOpt1">Question 1</option>
<option id="selectOpt2">Question 2</option>
<option id="selectOpt3">Question 3</option>
<option id="selectOpt4">Question 4</option>
</select>

<select id="select2">
<option id="selectOpt1">Question 1</option>
<option id="selectOpt2">Question 2</option>
<option id="selectOpt3">Question 3</option>
<option id="selectOpt4">Question 4</option>
</select>

<select id="select3">
<option id="selectOpt1">Question 1</option>
<option id="selectOpt2">Question 2</option>
<option id="selectOpt3">Question 3</option>
<option id="selectOpt4">Question 4</option>
</select>



</form>


JSFIDDLE-
CLick Here

Updated Fiddle
Updated

Scenario 1 - Select one option from any dropdown.It should be disabled from other dropdowns.
Scenario 2 - Change option from same dropdown. Previous option should be enabled in other dropdowns.

T J T J
Answer

Once you change the duplicate id's to common classes, You can try something like this

$('select').change(function () {
    $("option:disabled").prop("disabled",false); // reset the previously disabled options
    var $selectedQ = $(this).find("option:selected"); // selected option
    var commonClass= $selectedQ.attr("class"); // common class shared by the matching options
    $("."+commonClass).not($selectedQ).prop("disabled","disabled"); // disable the matching options other than the selected one
});

Updated Fiddle

(This won't work if there are more than one, different classes for the options, i'd use a common value or data attribute instead like)

$('select').change(function () {
  $("option:disabled").prop("disabled", false);
  var $selectedQ = $(this).find("option:selected")
  var value = $selectedQ.val();
  $("option[value='" + value + "']").not($selectedQ).prop("disabled", "disabled");
});

Demo

Update (as per comments)

$('select').change(function () {
  var prevMatches = $(this).data("prevMatches");
  if (prevMatches) prevMatches.prop("disabled", false)
     var $selectedQ = $(this).find("option:selected")
  var value = $selectedQ.val();
  var $matches = $("option[value='" + value + "']").not($selectedQ);
  $matches.prop("disabled", "disabled");
  $(this).data("prevMatches", $matches);
});

Demo