What is the best way to load HTML combo box dynamically on changing other combo box using JQuery

Question

Im up to finding easy way to load to the HTML combo box dynamically on changing another combo box i have a way but its really pain full and not a flexible code hard to maintain

For example I have 2 combo boxes country/provice when change the country according to country value province combobox value should change.

function getCo(cid){
    var countryVal=$('#cmbCountry').val();
    $.post("<?php echo url_for('country/ajaxloadcourse') ?>", //Ajax file
        { cid: cid },  // create an object will all values
        //function that is called when server returns a value.
        function(data) {
            var selectbox="<select name='province' id='province' class='formSelect' style='width: 150px;' tabindex='4' onchange='getCourseId(this.value,"+countryVal+")'>";
            selectbox = selectbox +"<option value=''><?php echo __('--Select--') ?></option>";
            $.each(data, function(key, value) {
                selectbox=selectbox +"<option value="+key+">"+value+"</option>";
            });
            selectbox=selectbox +"</select>";
            $('#provincelist').html(selectbox);
        },
        //How you want the data formated when it is returned from the server.
        "json"
    );
}

Is there any easy way to do this , Thanks

Answer 1

2 additional suggestions :

1. You can put the "HTML" fragmen/DOM builder blocks in the server-side instead, so create a class/method to generating the DOM (Select box)(since almost all popular php framework have their HTML helper, or if you already used to some templating system, like Smarty), this may reduce your JS script for easier maintenance.

2. Refactor your code. If you have some similar function/method, in your application, creating a common function is the best way to keep your code clean and maintanable. In this case, if you have more than one chaining combo-box method, it is a good idea to put some function like above into your own custom "plugin", so you doesn't need to write another identic function as above.