locked
3 ea jQuery cascading dropdowns - 1 drives 2 RRS feed

  • Question

  • User379720387 posted

    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>

    Thursday, October 9, 2014 2:40 PM

Answers

  • User1526116210 posted

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

    <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

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 10, 2014 1:36 AM

All replies

  • User-2051275383 posted

    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) {





    Thursday, October 9, 2014 10:17 PM
  • User1526116210 posted

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

    <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

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 10, 2014 1:36 AM
  • User379720387 posted

    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>

    Friday, October 10, 2014 12:03 PM