Disabled DropDownList in Cascade MVC 3

Question

I have two DropDownList in cascade

DD2 dependent on DD1.

how do I disable the DD2 if the D1 does not contain data for the selected item?

 $(function () {
         $('#DD1').change(function () {
             var selected1 = $(this).val();
             $.getJSON('@Url.Action("GetCiudadList", "ConsultorioSuper", new { Area = "Superusuario", controller = "Consultorio" })', { IdDD: selected }, function (myData) {
                 var Select2 = $('#DD2');
                 Select2.empty();
                 $.each(myData, function (index, itemData) {
                     citiesSelect.append($('<option/>', {
                         value: itemData.Value,
                         text: itemData.Text
                     }));
                 });
             });
         });

     })

 @Html.DropDownListFor(x => x.SelectedId1, new SelectList(ViewBag.IdUniversidad, "Id1", "Name"), "-- Select --", new { id = "DD1" })
 @Html.DropDownListFor(x => x.SelectedId2, new SelectList(Enumerable.Empty<SelectListItem>(), "Id2", "Name"), "-- Select --", new { id = "DD2" })

Blessings

Darin Dimitrov · Accepted Answer · 2012-07-08 21:23:26Z

1

how do I disable the DD2 if the D1 does not contain data for the selected item?

How do you know that D1 doesn't contain data for the selected item? What does your controller action return in this case? An empty array I guess. If that's the case a simple if condition would do the job:

$.getJSON('@Url.Action("GetCiudadList", "ConsultorioSuper", new { Area = "Superusuario", controller = "Consultorio" })', { IdDD: selected }, function (myData) {
    var Select2 = $('#DD2');
    if (myData.length == null || myData.length == 0) {
        // null or empty data => disable the second ddl and stop executing
        // this function
        Select2.attr('disabled', 'disabled');
        return;
    }

    // at this stage we know that the myData array contains element =>
    // rebind the second dropdown list with those elements
    Select2.empty();
    $.each(myData, function (index, itemData) {
        citiesSelect.append($('<option/>', {
            value: itemData.Value,
            text: itemData.Text
        }));
    });
});

answered Jul 8, 2012 at 21:23

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kalu Over a year ago

Hello @Darin Dimitrov Thanks but now, how do I enable the DD2 if the D1 contain data for the selected item?

Darin Dimitrov Over a year ago

Select2.removeAttr('disabled');. I would recommend you heading towards the jQuery documentation and read some getting started tutorials: docs.jquery.com/Main_Page

Collectives™ on Stack Overflow

Disabled DropDownList in Cascade MVC 3

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related