FAQs

jQuery Chosen is a plug-in that adds extra functionality to select drop-down elements. This FAQ shows you how to use jQuery Chosen with ChronoForms v5.

First, you need to download the jQuery Chosen files from the Harvest site - you can also see Chosen demonstrations there. Unzip the file and copy these files to a /components/com_chronoforms5/extras/jquery.chosen folder on your site. The files you need are chosen-sprite.png, chosen.min.css, and chosen.jquery.min.js.

Note: In this FAQ I have renamed the chosen.jquery.min.js file to chosen.min.js as I am using the jQueryEasy extension and it would not load the file with 'jquery' in the name. 

A basic dropdown 

In the Form Editor open the Designer tab and add a Dropdown to your form with the name and id country. Add a sample list of country names in the Options box e.g.:

Brazil=Brazil
China=China
France=France
India=India
USA=USA

Open the Load CSS action and add this to the CSS Files box to load the Chosen CSS:

<?php
echo JURI::root().'components/com_chronoforms5/extras/jquery.chosen/chosen.min.css';
?>

Save and Close

Open the Load JavaScript action and smilarly add this code to the JS Files box :

<?php
echo JURI::root().'components/com_chronoforms5/extras/jquery.chosen/chosen.min.js';
?>

In the JS Code box add code like this

jQuery(document).ready(function(jQ) {
  jQ('#country').chosen( {
    width : '200px'
  });
});

Save the form and test. 

A double dropdown

A double dropdown is a pair of linked dropdowns set up so that when the first one changes they options in the second one are changed to match.

For this we need two Dropdown elements in the form: the first we will give the name and id country_b (just to make it different from the country example above), the second we will give the name and id states.

The first one should be set up in the same way as the example above and we will add an entry in the Extra params box data-placeholder=--??--

In the second Dropdown add the same placeholder, leave the Options box empty and set the Load state to disabled.

Add the same code to the Load CSS and Load JavaScript Files boxes.

In the Load JavaScript action JS Code box add code like this:

jQuery(document).ready(function(jQ) {
  // add Chosen to the country_b dropdown
  // set to call the changeCountry function when it changes
  jQ('#country_b').chosen( {
    width : '200px'
  } ).change( changeCountry );
  // add Chosen to the states dropdown
  jQ('#states').chosen( {
    width : '200px'
  } );

  // this function is run when the country changes
  function changeCountry() {
    var country, new_options;
    country = jQ("#country_b option:selected").val();
    if ( !country ) {
      // no country selected
      // clear and disable the states dropdown
      jQ('#states').empty();
      jQ('#states').trigger("chosen:updated");
      jQ('#states').prop('disabled', false);
      return;
    }
    // get the new set of options
    new_options = options[country];
    // enable the dropdown
    jQ('#states').prop('disabled', false);
    // remove the old options
    jQ('#states option:gt(0)').remove();
    // load the new options
    jQ.each(new_options, function(value, key) {
      jQ('#states').append(jQ('<option></option>').attr('value', value).text(key));
    });
    // update Chosen
    jQ('#states').trigger("chosen:updated");
  }

  // sample options list for testing
  var options = {
    'Brazil' : {
      'Sao Paulo' : 'Sao Paulo',
      'Rio de Janeiro' : 'Rio de Janeiro',
      'Ceara' : 'Ceara',
      'Santa Catarina' : 'Santa Catarina',
      'Espirito Santo' : 'Espirito Santo',
     },
      'China' : {
      'Beijing' : 'Beijing',
      'Hebei' : 'Hebei',
      'Jiangsu' : 'Jiangsu',
      'Guangdong' : 'Guangdong',
      'Fujian' : 'Fujian',
    },
    'France' : {
      'Ile-de-France' : 'Ile-de-France',
      'Midi-Pyrenees' : 'Midi-Pyrenees',
      'Picardie' : 'Picardie',
      'Franche-Comte' : 'Franche-Comte',
      'Bretagne' : 'Bretagne',
    },
    'India' : {
      'Haryana' : 'Haryana',
      'Andhra Pradesh' : 'Andhra Pradesh',
      'Delhi' : 'Delhi',
      'Tamil Nadu' : 'Tamil Nadu',
      'Uttar Pradesh' : 'Uttar Pradesh',
    },
    'USA' : {
      'CA' : 'California',
      'IA' : 'Iowa',
      'NY' : 'New York',
      'NJ' : 'New Jersey',
      'MA' : 'Massachusetts',
    }
  }
}); 

See the comments in the code for more information.

Note that the state options here are only an example for demonstration. You could extend the code to get an updated list using an AJAX call to the server instead of including all the options here.