Link to home
Start Free TrialLog in
Avatar of Neil Bradley
Neil BradleyFlag for New Zealand

asked on

show/hide options based on selection

Here I have 2 dropdown selects https://codepen.io/Escuminac/pen/gOdmovJ

With the current script, whatever I pick from one will hide from another.


My aim
Whatever I select from "Goods1", that option should not be available in "Goods2", Meaning, I should never be able to have the same 2 options selected at any given time, regardless of which selector I use first.


If I pick "Tea" in Goods 1, "Tea" should be hidden/removed from Goods 2.

If I change "Goods1" to "Bread" then "Tea" becomes available again in "Goods2".


Thanks all.



PS: I have this as a possible solution but it seems clunky

        var $selectFrom = $('#selectOne');
        var $selectTo = $('#selectTwo');
        $selectFrom.change(function(){
            if ($selectTo.find('option').is(':hidden')){
                $selectTo.find('option').show();
            }; 
            var fromSelected = $(this).find('option:selected').text();
            if( fromSelected !="" ) { 
                $selectTo.find("option:contains('"+ fromSelected +"')").hide();
            }
            
        });
        $selectTo.change(function(){
            if ($selectFrom.find('option').is(':hidden')){
                $selectFrom.find('option').show();
            }; 
            var toSelected = $(this).find('option:selected').text();
            if( toSelected !="" ) {
                $selectFrom.find("option:contains('"+ toSelected +"')").hide();
            }
        });

Open in new window


Avatar of Paul MacDonald
Paul MacDonald
Flag of United States of America image

Without suggesting it's optimal, this code works:

var $selectFrom = $('#selectOne');
var $selectTo = $('#selectTwo');


$selectFrom.change(function(){
  //Unhide all options in other dropdown
  $('#selectTwo').children('option').show();
  
  //Hide selection in other dropdown if this selection isn't empty
  var fromSelected = $(this).find('option:selected').text();
  
  if($.trim(fromSelected) !="" ) {
    $selectTo.find("option:contains('"+ fromSelected +"')").hide();
  }
});

$selectTo.change(function(){
    //Unhide all options in other dropdown
  $('#selectOne').children('option').show();
  
  //Hide selection in other dropdown if this selection isn't empty
  var toSelected = $(this).find('option:selected').text();

  if($.trim(toSelected) !="" ) {
    $selectFrom.find("option:contains('"+ toSelected +"')").hide();
  }
});

Open in new window

Note:
Your empty option tag isn't empty.  Either remove the space in between the open and close tags, put some other text in there to check for, or (as I did) .trim the space away so it actually comes back as empty.


ASKER CERTIFIED SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial