Hi Guys,

Just found somethings is useful (maybe just for me  ^__^) so just share it here ~

You need to populate related options  in selectbox  based on parents selectbox .

e.g :
Group is my parent selectbox And Type is the selectbox i need to populate options out based on Group selectbox value.

After design you form , please remember to setup selectbox's grouping column

Add custom html on the form and copy below script into it , remember modify it based on your selectbox name :

$('select[name*="group"]').change(function() {
var parentSelectboxValue= this.value;

var selectBox =  $("select[name*='type']")[0];

for (var i = 0, j = selectBox.length; i < j; i++) {
      var option = $('select[name*="type"]')[0].children[i];
      var optionGroupValue= option.getAttribute("grouping");
      if(optionGroupValue!='' && optionGroupValue!=parentSelectboxValue){



I change the option's CSS to hide those non related option.

The reason i didn't remove option form the options list because i am quite lazy to populate the list again when the parent selectbox change.

If you have better solutions, please share with me as well.

Thanks ~

  • No labels


  1. Hi Kien Fei,

    There are another solution in this page Dynamic Cascading Drop-Down List

    Hope it help.

  2. Hi Owen ,

    TQVM  ~ it's working !!



  3. just some sharing ~

    eventhough you are load options from option binder (selectbox) , you also need to fill up

    "field id to control available options based on grouping" then only the drill-down selectbox will working fine.