3

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.

Improve this question
6
  • you can use to disable them instead of hide Commented Aug 8, 2014 at 6:19
  • @Kaushik You cannot hide select > option. you can only disable it. Commented Aug 8, 2014 at 6:21
  • 2
    id should be unique. Use class instead. Commented Aug 8, 2014 at 6:21
  • @ShahRukh.. Either of them is ok.. I dnt have problem with disabling. I am stuck up with enabling the same when option has been changed from parent dropdown. Commented Aug 8, 2014 at 6:22
  • I'm able to select the same option in all 3 drop downs in your demo. di you check whether it's working or not? Commented Aug 8, 2014 at 6:22

3 Answers 3

Reset to default
3

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

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Hey Tilwin.. This enables the first selected option after I select the one more option from other dropdown...
@Kaushik I read you comment for the other answer, you want it to be like this?
Well 75% correct. Still it will not enable other options on some point of time. Let me show you how! Select Question 3 from First Dropdown. Select Question 4 from Second Dropdown. Select Question 2 from Third Dropdown. Now all the dropdowns will have Question 1 as enabled option. If I select Question 1 in the Thrid dropdown. Question 2 shuold be enabled for all the dropdowns. This is how I want it.
Bingo.. Even this is exactly what I want. Thanks alot for the answer.. :)
1

You could do something like this:

var removeSelection = function (select) {
var id=select.attr("id");
$(".hide-"+id).show();
$('select').filter(':not(#' + select.attr('id') + ')').each(function () {
    var index = select.find(':selected').index();

    $(this).find("option").removeClass("hide-"+id);
    $(this).find('option:eq(' + index + ')').each(function(){
    if($(this).attr("id")!="selectOpt1"){
        $(this).addClass("hide-"+id);
    }
});
});
$(".hide-"+id).hide();

};

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

JSFiddle

Improve this answer

3 Comments

Well this meets my requirements partially. First if I select Question 3 from first dropdown, it will be removed from other 2. Then if I select Question 2 from 2nd dropdown and Question 4 from 3rd dropdown, Question 1 must be always there in all the dropdowns. When I select Question 1 again in 1st dropdown, First selected option Question 3, will not be shown again in other 2 dropdowns...
Ok, I didnt get that from the question, now it is updated to allways show option 1.
No no. you got it wrong. Let me update my fiddle and let u explain scenario. Question 1 is not default. Lets say I have first option as -Select Question-. and 4 questions in each dropdowns. Scenario 1 - The one selected in any dropdowns should be disabled in other dropdowns. Scenario 2 - If the selection gets changed it should be enabled back in other dropdowns too.. Hope you got it.
-1

Take a look

               <form id="form1">
        <select id="select1">
         <option     value="Question1">Question 1</option>
            <option value="Question2" >Question 2</option>
            <option  value="Question3"  >Question 3</option>
            <option  value="Question4"  >Question 4</option>
        </select>
<select id="select2">
         <option     value="Question1">Question 1</option>
            <option value="Question2" >Question 2</option>
            <option  value="Question3"  >Question 3</option>
            <option  value="Question4"  >Question 4</option>
        </select>

    <select id="select3">
         <option     value="Question1">Question 1</option>
            <option value="Question2" >Question 2</option>
            <option  value="Question3"  >Question 3</option>
            <option  value="Question4"  >Question 4</option>
        </select>




     </form>





               $(document).on('change','select',function(e){
                     var elm = $(this);
                     elm.find('option').show();
                     $('select').not(elm).find('option',each(function(){
                        if($(this).attr('value')==$(elm).val()){
                             $(this).hide();
                         }else{
                                 $(this).show();
                         }
                     }));



                });
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.