[RESOLVED]3 ea jQuery cascading dropdowns – 1 drives 2

DropDownList, HTML, Jquery, Label, Web Forms, , , ,

I am going by
this at www.mikesdotnetting.com

My variation is the selection in the first dropdown is used to drive the queries in the other two.

The second dropdown populates fine, the third dropdown stays empty.

I can see the second Json.Write complete with the desired data, but I never updates the third dropdown.

What am I missing here?

    <div class="form-group">
    <label class="col-xs-5 control=label">sizes:</label>
        <div class="col-xs-7">
        @Html.DropDownList("ssizeId", "-- Select --", shoesizes, new { @class= "form-control"})
        </div>
    </div>
    <br/><br/>

    <div class="form-group">
    <label class="col-xs-5 control=label">Fronts:</label>
    <div class="col-xs-7">
    @Html.DropDownList("isId", "", Enumerable.Empty<SelectListItem>(), new { @class= "form-control"})
        </div>
    </div>
    <br/><br/>

    <div class="form-group">
    <label class="col-xs-5 control=label">Rears:</label>
    <div class="col-xs-7">
    @Html.DropDownList("isId", "", Enumerable.Empty<SelectListItem>(), new { @class = "form-control" })
        </div>
    </div>
    <br /><br />

<script type="text/javascript">
    $(function () {
        var fshoeSelect = $('#isId');
        fshoeSelect.attr('disabled', true);
        $('#ssizeId').change(function () {
            var ssizeId = $(this).val();
            $.getJSON('@Href("~/Members/Size2GetManufModelF/")' + ssizeId, function (fshoes) {
                fshoeSelect.attr('disabled', false);
                fshoeSelect.empty();
                fshoeSelect.append(
                        $('<option/>')
                            .attr('value', '')
                            .text('-- Fronts --'));
                $.each(fshoes, function (index, fshoe) {
                    fshoeSelect.append(
                        $('<option/>')
                            .attr('value', fshoe.isId)
                            .text(fshoe.ManufModel)
                    );
                });
            });

            $.getJSON('@Href("~/Members/Size2GetManufModelR/")' + ssizeId, function (rshoes) {
                rshoeSelect.attr('disabled', false);
                rshoeSelect.empty();
                rshoeSelect.append(
                        $('<option/>')
                            .attr('value', '')
                            .text('-- Rears --'));
                $.each(rshoes, function (index, rshoe) {
                    rshoeSelect.append(
                        $('<option/>')
                            .attr('value', rshoe.isId)
                            .text(rshoe.ManufModel)
                    );
                });
            });

        });
    });
</script>

wavemaster

I am going by
this at www.mikesdotnetting.com

My variation is the selection in the first dropdown is used to drive the queries in the other two.

The second dropdown populates fine, the third dropdown stays empty.

I can see the second Json.Write complete with the desired data, but I never updates the third dropdown.

What am I missing here?

    <div class="form-group">
    <label class="col-xs-5 control=label">sizes:</label>
        <div class="col-xs-7">
        @Html.DropDownList("ssizeId", "-- Select --", shoesizes, new { @class= "form-control"})
        </div>
    </div>
    <br/><br/>

    <div class="form-group">
    <label class="col-xs-5 control=label">Fronts:</label>
    <div class="col-xs-7">
    @Html.DropDownList("isId", "", Enumerable.Empty<SelectListItem>(), new { @class= "form-control"})
        </div>
    </div>
    <br/><br/>

    <div class="form-group">
    <label class="col-xs-5 control=label">Rears:</label>
    <div class="col-xs-7">
    @Html.DropDownList("isId", "", Enumerable.Empty<SelectListItem>(), new { @class = "form-control" })
        </div>
    </div>
    <br /><br />

<script type="text/javascript">
    $(function () {
        var fshoeSelect = $('#isId');
        fshoeSelect.attr('disabled', true);
        $('#ssizeId').change(function () {
            var ssizeId = $(this).val();
            $.getJSON('@Href("~/Members/Size2GetManufModelF/")' + ssizeId, function (fshoes) {
                fshoeSelect.attr('disabled', false);
                fshoeSelect.empty();
                fshoeSelect.append(
                        $('<option/>')
                            .attr('value', '')
                            .text('-- Fronts --'));
                $.each(fshoes, function (index, fshoe) {
                    fshoeSelect.append(
                        $('<option/>')
                            .attr('value', fshoe.isId)
                            .text(fshoe.ManufModel)
                    );
                });
            });

            $.getJSON('@Href("~/Members/Size2GetManufModelR/")' + ssizeId, function (rshoes) {
                rshoeSelect.attr('disabled', false);
                rshoeSelect.empty();
                rshoeSelect.append(
                        $('<option/>')
                            .attr('value', '')
                            .text('-- Rears --'));
                $.each(rshoes, function (index, rshoe) {
                    rshoeSelect.append(
                        $('<option/>')
                            .attr('value', rshoe.isId)
                            .text(rshoe.ManufModel)
                    );
                });
            });

        });
    });
</script>

I am unsure if this helps but this looks wrong (but I could be wrong – so just give it a go)..

  $.getJSON('@Href("~/Members/Size2GetManufModelF/" + ssizeId + "")', function (fshoes) {

What I can see is that both the second and third dropdows have the same id

wavemaster

<div class="form-group">
    <label class="col-xs-5 control=label">Fronts:</label>
    <div class="col-xs-7">
        @Html.DropDownList("isId", "", Enumerable.Empty<SelectListItem>(), new { @class= "form-control"})
    </div>
</div>
<div class="form-group">
    <label class="col-xs-5 control=label">Rears:</label>
    <div class="col-xs-7">
        @Html.DropDownList("isId", "", Enumerable.Empty<SelectListItem>(), new { @class = "form-control" })
    </div>
</div>

And then in your js you have selected both of them


wavemaster

var fshoeSelect = $('#isId');

But when you try to fill 

rshoeselect

you haven’t defined 

rshoeselect.

I suggest giving each a different id then selecting them with your jQuery

mhcodner you are right.

Here is the final code for future reference:

    <div class="form-group">
    <label class="col-xs-5 control=label">sizes:</label>
        <div class="col-xs-7">
        @Html.DropDownList("ssizeId", "-- Select --", shoesizes, new { @class= "form-control"})
        </div>
    </div>
    <br/><br/>

    <div class="form-group">
    <label class="col-xs-5 control=label">Fronts:</label>
    <div class="col-xs-7">
    @Html.DropDownList("isfId", "", Enumerable.Empty<SelectListItem>(), new { @class= "form-control"})
        </div>
    </div>
    <br/><br/>

    <div class="form-group">
    <label class="col-xs-5 control=label">Rears:</label>
    <div class="col-xs-7">
    @Html.DropDownList("isrId", "", Enumerable.Empty<SelectListItem>(), new { @class = "form-control" })
        </div>
    </div>
    <br /><br />

<script type="text/javascript">
    $(function () {
        var fshoeSelect = $('#isfId');
        fshoeSelect.attr('disabled', true);
        $('#ssizeId').change(function () {
            var ssizeId = $(this).val();
            $.getJSON('@Href("~/Members/Size2GetManufModelF/")' + ssizeId, function (fshoes) {
                fshoeSelect.attr('disabled', false);
                fshoeSelect.empty();
                fshoeSelect.append(
                        $('<option/>')
                            .attr('value', '')
                            .text('-- Fronts --'));
                $.each(fshoes, function (index, fshoe) {
                    fshoeSelect.append(
                        $('<option/>')
                            .attr('value', fshoe.isfId)
                            .text(fshoe.ManufModel)
                    );
                });
            });
        });
    });

    $(function () {
        var rshoeSelect = $('#isrId');
        rshoeSelect.attr('disabled', true);
        $('#ssizeId').change(function () {
            var ssizeId = $(this).val();
            $.getJSON('@Href("~/Members/Size2GetManufModelR/")' + ssizeId, function (rshoes) {
                rshoeSelect.attr('disabled', false);
                rshoeSelect.empty();
                rshoeSelect.append(
                        $('<option/>')
                            .attr('value', '')
                            .text('-- Rears --'));
                $.each(rshoes, function (index, rshoe) {
                    rshoeSelect.append(
                        $('<option/>')
                            .attr('value', rshoe.isrId)
                            .text(rshoe.ManufModel)
                    );
                });
            });
        });
    });
</script>

Leave a Reply