Chosen-jquery show/hide under double condition

StackOverflow https://stackoverflow.com/questions/22774315

Question

I'm trying to show/hide some radio buttons under a double condition with Chosen. Not sure if it can be done.

I've this first select which populates a second select. The second select are indeed several selects shown and hidden depending on the first select's choice.

The goal is to show/hide some radio buttons depending on the select's choices. So if you have select1=A and select2=a' show a certain radio button.

So far I've manages this succesfully with one single select as a condition (JS):

$(".chosen").chosen();
$("#a").chosen().change(function () {
  var value = $(this).val();
  if (value=="Opt1") {
    $("#b").show();

    } else {$("#b").hide();}
    }).trigger('change');

This is the function that shows/hides the second select.

As I've tried a lot of stuff and didn't succeed I've come to a desperate solution which is forget about double condition and trigger the radio buttons upon the second select's choice, like this (JS):

$(".chosen").chosen();
$("#c").chosen().change(function () {
  var value = $(this).val();
  if (value=="Opt1") {
    $("#radio").show();

    } else {$("#radio").hide();}
    }).trigger('change');

However it ruins the whole thing because it shows this "c" select when it should be hidden according to the previous functions. Any idea on how overcome this?

UPDATE

This is the whole code. I removed id's making no sense with the real names:

<!doctype html>
<html lang="en">

<head>
 <meta charset="utf-8">
<title>Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes</title>
 <link rel="stylesheet" href="docsupport/style.css">
 <link rel="stylesheet" href="docsupport/prism.css">
 <link rel="stylesheet" href="chosen.css">
<style type="text/css" media="all">
  /* fix rtl for demo */
  .chosen-rtl .chosen-drop { left: -9000px; }
</style>
</head>

<body>
 <form>

  City  
    <div id="city"> 
    <select data-placeholder="Select city" id="a" class="chosen-select"   style="width:350px;" tabindex="2">  
     <option value="London">London</option>
     <option value="Paris">Paris</option>
     </select>
     </div>
     <br>

  Trial
    <div id="trial1">
    <select data-placeholder="Select court" class="chosen-select" style="width:350px;" tabindex="2">
      <option value="Court of District"> Court of District </option>
      <option value="Magistrate’s Court"> Magistrate’s Court </option>
    </select>
    </div>

    <div id="trial2">
    <select data-placeholder="Select court2" class="chosen-select" style="width:350px;" tabindex="2">  
      <option value="Cour de cassation"> Cour de cassation </option>
      <option value="Cour d’apell"> Cour d’apell </option>
    </select>
    </div>
    <br>

<!--- this is a hidden radio that should show up when city== “Paris” and trial2== “Cour d’apell” --->

   <div id=radio1><br>
   <input type="radio" name="radiob" value="Apell Criminal"> Apell Criminal <br>
   <input type="radio" name="radiob" value="Apell Civil" checked> Apell Civil <br> 
   </div>

   <br>
   <input type="button" id="btncalc" value="Go on">
   </form>
   </body>   

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"  type="text/javascript"></script>
   <script src="chosen.jquery.js" type="text/javascript"></script>
   <script src="docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript">


   var config = {
     '.chosen-select'           : {},
     '.chosen-select-deselect'  : {allow_single_deselect:true},
     '.chosen-select-no-single' : {disable_search_threshold:10},
     '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
     '.chosen-select-width'     : {width:"95%"}
   }

  for (var selector in config) {
  $(selector).chosen(config[selector]);
   }

      <!--- Hides the third select and radio buttons--->

   $('#trial2').hide();
   $('#radio1').hide();

     <!---  Shows/hides second and third select, depending on first select’s choice--->

$(".chosen").chosen();
$("#city").chosen().change(function () {
    var value = $(this).val();
    if (value=="London") {
        $("#trial1").show();
        $("#trial2").hide();
    } else if (value == "Paris") {
        $("#trial1").hide();
        $("#trial2").show();
    } 
}).trigger('change');



        <!--- show/hide the radio button--->    

$('.chosen').chosen().change(onChange);

    var onChange = function () {
    var a = $('#city').find('select').val();
    var b = $('#trial1').find('select').val();
    var c = $('#trial2').find('select').val();
    /* do all conditional checks here on values a, b, and c */
   /* here is an example check on the values of a and b: */
    if (a === 'Paris' && c === ‘Cour d’apell’) {
    /* show radios */
    $("#radio1").show();
}
}; $('.chosen').chosen().change(onChange);


</script>

</body>
</html>
Was it helpful?

Solution

For consistency's sake, let's wrap each select within a div. We can id the divs 'a', 'b', and 'c', but that is really ugly and I would suggest thinking up something more descriptive. We can first write a function that we want to run whenever any of our selects has its value changed:

var onChange = function () {
    var a = $('#a').find('select').val();
    var b = $('#b').find('select').val();
    var c = $('#c').find('select').val();
    /* do all conditional checks here on values a, b, and c */
    /* here is an example check on the values of a and b: */
    if (a === 'X' && b === 'ya') {
        /* show radios */
    }
};

We will then pass our function as the change handler to all .chosen selects (we must be certain that all of the selects that we want to apply 'chosen' to have a class of 'chosen'):

$('.chosen').chosen().change(onChange);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top