Display x if x display y if y (bad title I know)

Question

Ok, so I have some jQuery code that displays an input box if an item with prefix Blue from dropdown menu is selected.

Code:

$(function() {
    $('#text1').hide();
    $('#select2').on('change', function(event) {
        var opt = this.options[ this.selectedIndex ];
        var picked_blue = $(opt).text().match(/Blue/i);
        if(picked_blue) {
            $('#text1').show();
        } else {
            $('#text1').hide();
        }
    });
});

But what I also need to add is to display something else if any other item from dropdown menu is selected. And what I need to display is another dropdown menu of items.

Answer 1

Shouldn't this work for you:

if(picked_blue) {
  $('#text1').show();
  $('#text2').hide();
} else {
  $('#text1').hide();
  $('#text2').show();
}

where text1 and text2 share the position in the DOM, with texts like 'blue' and 'not blue at all', respectively?

Answer 2

You need to put condition in else part of your statement.

$(function() {
    $('#text1').hide();
    $('#select2').on('change', function(event) {
        var opt = this.options[ this.selectedIndex ];
        var picked_blue = $(opt).text().match(/Blue/i);
        if(picked_blue) {
            $('#text1').show();
        } else {
            $('#text1').hide();
            if($(opt).text().match(/Red/i))
            {
                  //You code here
            }
        }
    });
});

or shortening code.

$(function() {
    $('#text1').hide();
    $('#select2').on('change', function(event) {
       selectedVal = $(this).val().toLowerCase();
       switch (selectedVal){
         case 'blue':
            //Your code
            break;
          case 'red':
           //Your code
           break;
          case 'black':
            //Your code
            break;
          default:
            //your code
        }
   });
});

Answer 3

Why cant you try with toggle function in Jquery

$('#text1').toggle();