How can I hide an element when a user selects an option, navigates away, or selects the same option?

Question

I'm practicing some JQuery and am working on a simple app that asks the user what their favorite food and drink are.

I'm trying to create the app so that the resulting text... "Your favorite food is x, and drink is y", only shows when the user has actually selected their favorite food/drink and when they aren't actively selecting.

My problem is, I can't figure out how to hide the resulting text while the user is selecting the options, in a manner that also has the ability to show the text once the selects are made. I used a change() method which allows me to show the text when they select something new. But what about if the user clicks away, or selects the same option?

Thoughts?

Here's the code...

http://codepen.io/zharriott/pen/oZxvBO?editors=1011

$(document).ready(() => {
  /******************
  REFERENCES
  ******************/
  const $foodSelector = $('.questions__q1'),
      $drinkSelector = $('.questions__q2'),
      $dropdownInputs = $('.questions select'),
      $foodResultTxt = $('.result__fav-food'),
      $drinkResultTxt = $('.result__fav-drink'),
      $result = $('.result'),
      $resultTxt = $result.text();

  /******************/
  $dropdownInputs.change(() => {
    //IF food/drink has not been selected, leave result hidden
    if ( $foodSelector.find(':selected').text() === 'Select an option...' || $drinkSelector.find(':selected').text() === 'Select an option...' ) {} 
    else {
      //Update and show result to display user's current answers
      $foodResultTxt.text($foodSelector.find(':selected').text());
      $drinkResultTxt.text($drinkSelector.find(':selected').text());
      console.log($resultTxt);
      $result.show(1400);
    }
  });
});

Thoughts?

Answer 1

You can consider saving the current value of the input with the focus event and then comparing the selected value after change with both the previous one and the placeholder.

$dropdownInputs.focus(function(){
    var oldFoodValue = $foodSelector.find(':selected').text();
    var oldDrinkValue = $drinkSelector.find(':selected').text();
}).change(() => {
    //IF food/drink has not been selected or is equal to the previous value, leave result hidden
    if ( $foodSelector.find(':selected').text() === 'Select an option...' ||
         $drinkSelector.find(':selected').text() === 'Select an option...' ||
         $foodSelector.find(':selected').text() === oldFoodValue ||
         $drinkSelector.find(':selected').text() === oldDrinkValue) {} 
    else {
      //Update and show result to display user's current answers
      $foodResultTxt.text($foodSelector.find(':selected').text());
      $drinkResultTxt.text($drinkSelector.find(':selected').text());
      console.log($resultTxt);
      $result.show(1400);
    }
  });

Answer 2

$foodResultTxt.hide();

以及何时需要显示：

$foodResultTxt.show();