msdropdown - Load second dropdown based on first

Question

I have tried the following code to load second drop down based on first drop down and it works fine. But the second drop down not clearing its content while I am selecting first drop down second time. It is appending values.

Also the value of option of the second drop down should be "json_data[i].value". But for me it is "json_data[i].text"

Here is the code that I have used in the click of first drop down.

      $.ajax({
      url: "http://foo.bar/data.json",
      type: "POST",
      data: {
        article: produkt,
        color: farbe,
        size: groesse,
        form: typ
     }
     }).done(function (data) {
         var json_data = $.parseJSON(data.responseText.trim());

         for(var i=0;i<json_data.length;i++) {
            json_data[i].text = json_data[i].NAME;
            json_data[i].value = json_data[i].VALUE;
            oHandler2.add(json_data[i]);//adding
         }
         oHandler2.showRows(json_data.length);
     });

Below is my html part,

        <span class="field_outer">
        <label>Main Category</label>
        <div class="filter">
            <select id="main_category" name="main_category" class="ddTitle select" onchange="">
                <option value="0" selected>Select a main category</option>
                <option value="1">category1</option>
                <option value="2">category2</option>
            </select>
        </div>
        </span><!-- /.field_outer -->
        <span class="field_outer">
        <label>Sub Category</label>
        <div class="filter">
            <select id="sub_category" name="sub_category"  class="select" onchange="">
                <option value="0" selected>Select a sub category</option>
            </select>
        </div>
        </span>

Please help; Thanks in advance :-)

Answer 1

destroy - Restore the original dorpdown.

var oDropdown = $("#element").msDropdown().data("dd");
oDropdown.destroy()

refresh - Refresh the msdropdown UI and value based on original dropdown.

var oDropdown = $("#element").msDropdown().data("dd");
oDropdown.refresh(); //or
document.getElmentById("element").refresh();

For details check -

http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/index.html