Drill-down selectbox options

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 :

<script>
$('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){
           option.style.display="none";
      }else{
           option.style.display="block";
      }
}

});

</script>

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 ~