How to in jQuery show a paragraph based on two different select options

Question

I basically want to for example if the user chooses "Option 1" and "Option a" show one thing and if the user chooses "Option 2" and "Option c" show another.... ect...

I've tried to play around with it on https://jsfiddle.net/xw6t3gL4/8/

Thank you!

 $('#first').on('change', function() { if (this.value === "01") { $("#one").show(); } else { $("#one").hide(); } }); $('#second').on('change', function() { if (this.value === "a") { $("#one").show(); } else { $("#one").hide(); } });

 p { display: none; }

 <div data-role="fieldgroup"> <select id="first"> <option>ONE</option> <option value="01">Option 1</option> <option value="02">Option 2</option> <option value="03">"Option 3</option> </select> </div> <div data-role="fieldgroup"> <select id="second"> <option>TWO</option> <option value="a">Option a</option> <option value="b">Option b</option> <option value="c">Option c</option> </select> </div> <p id="one"> 1 </p> <p id="two"> 2 </p> <p id="three"> 3 </p>

Answer 1

How about this?

$('select').on('change', function(){
  var select1 = $('#first').val();
  var select2 = $('#second').val();
  $('#one, #two, #three').hide();
  if (select1 === "01" && select2 === "a") {
    $('#one').show();
  }
  if (select1 === "02" && select2 === "b") {
    $('#two').show();
  }
  if (select1 === "03" && select2 === "c") {
    $('#three').show();
  }
});

https://jsfiddle.net/xw6t3gL4/11/

Answer 2

You could use a switch() to evaluate the selected value.

https://jsfiddle.net/itopizarro/7o9wdnqa/

Answer 3

Try updating a single div's content with the values of the inputs. https://jsfiddle.net/xw6t3gL4/9/

You could also depending on the values, have a PHP handle the values and output the results you wish:

$('#output').load('process_page.php?input1=' + $("#first").val() + '&input2=' + $("#second").val());

https://jsfiddle.net/xw6t3gL4/10/