Jquery-- Cascading Dropdown Not binding values?

Question

Hi iam using Cascading Dropdown using Jquery in asp.net

My webMethod is getting called, iam getting result but values are not getting bind.

here is my code

    if ($(".ddlService").val() != "") {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "Port.aspx/VCode_Get",
                    data: "{ServiceID:'" + $(".ddlService").val() + "'}",
                    dataType: "html",
                    success: function (html) {
                        try {                           
                            Success(html);
                        } catch (ex) {
                            alert("ErrCode:7");
                        }
                    },
                    error: function (msg) {
                        alert("ErrCode:8");
                    }
                })
                return false;
            }
            else {
                    $(".ddlVoyage").empty();
                    $(".ddlVoyage").append("<option value=''>Select </option>");
                }
        });
    });

    function Success(result) {
       alert("SUccess Called");
       $(".ddlVoyage").empty();
       $(".ddlVoyage").append("<option  value=''>Select </option>");

       $.each(data, function (index, result) {
           $(".ddlVoyage").append("<option value='" + result.VoyageMasterID + "'>" + result.VoyageCode + "</option>");

        });          
    }

iam getting the alert

alert("SUccess Called");

ALso to the targent Dropdown iam getting value Select bind to it, but values are not getting bind

Iam having values in my Database too..,

I think something need to be changed in this 2 lines where iam struck

  $.each(data, function (index, result) {
           $(".ddlVoyage").append("<option value='" + result.VoyageMasterID + "'>" + result.VoyageCode + "</option>");

Iam not getting idea of how to bind those values to Select , Im struck here, Can anyone please help.

Answer 1

i think your are binding the html in wrong way..

 ..<option value='" + result.VoyageMasterID + "'>"...
                  //--^^^^^^^^^^^^^^^^---here looks like you have a response as JSON..

try this

 $.ajax({
        type: "POST",
        ...
        dataType: "json",  //here get response as json
        .....  
       });   

and make sure you send the response as JSON in your controller (which i think you are already doin it).. changing the dataType as JSON should work..

updated

your json

 { "Table": [ { "VoyageMasterID": 3, "VoyageCode": "9101" }, { "VoyageMasterID": 3, "VoyageCode": "9101" }]}            

try this

function Success(result) {
   alert("SUccess Called");
   $(".ddlVoyage").empty();
   $(".ddlVoyage").append("<option  value=''>Select </option>");

   $.each(result.Table, function (index, value) {
       $(".ddlVoyage").append("<option value='" + value.VoyageMasterID + "'>" + value.VoyageCode + "</option>");

    });          
 }

since you json is in array of objects.. you have to loop through result.Table(your object's name is table) and get its correspoding voyagemasterid and voyagecode

Answer 2

Try this

$(".ddlVoyage").append("<option value='" + value.Value + "'>" + value.Text + "</option>");

This is how i use it

 $('#offices').change(function () {
            $.ajax({
                url: '@Url.Action("FillDepartments", "Contact")',
                type: 'POST',
                cache: false,
                data: { id: $(this).val() },
                dataType: 'json',
                success: function (departments) {
                    $.each(departments, function (i, departments) {
                        $("#departments").append('<option value=' + departments.Value + '>' + departments.Text + '</option>')
                    });
                },

                error: function (error) {
                    alert(errorss);
                }
            });
        });