Question

script

<script type="text/javascript">
$(document).ready(function () {
    $('musteri_sno').change(function () {
        $('form_sayac_secimi').submit(function () {
            if ($(this).valid()) {
                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (result) {

                    }
                });
            }
            return false;
        });
    });
});
</script>

html

@using (Html.BeginForm("SayacSecimiPartial", "SayacOkumalari", FormMethod.Post, new { id = "form_sayac_secimi" }))
{
<table>
    <tr>
        <td>
            @Html.DropDownList("musteri_sno", (SelectList)ViewBag.musteri_id, "--Müşteri Seçiniz--", new { id = "musteri_sno" })
        </td>
        <td>
            @Html.DropDownList("sayac_no", Enumerable.Empty<SelectListItem>(), "-- Sayaç Seçiniz --", new { id = "sayac_no" })
        </td>
        <td>
            <input type="submit" value="Uygula" />
            @Html.Hidden("sno", new { sno = ViewData["sno"] })
        </td>
    </tr>
</table> 
}

I want to fill second dropdown with values that is returned from first one.How can I do this?

Thanks.

Answer 1

In the success callback of your ajax call, build the option tag filled with the values you are returned and then append it to the select tag named “sayac_no”.

success: function(result) {
  var opt = '';
  for (var i = 0; i < result; i++) {
    opt += '<option value="' + result[i].value + '">' + result[i].name + '</option>';
  }
  $('select[name=sayac_no]').html(opt);
}

I suppose the result object is a list of objects with two properties, name and value.
Modify it accordingly to your needs and improve it because this is just a very basic version.