locked
How to find dropdown in table when another dropdown value will be changed RRS feed

  • Question

  • User264732274 posted

    i am working with cascade dropdown and i know how to populate 2nd dropdown on the change of 1st dropdown.

    here is a sample code to handle cascade dropdown by jquery.

    $(document).ready(function () {   
            //Dropdownlist Selectedchange event     
            $("#SelectedStateID").change(function () {   
                $("#SelectedCountryID").empty();   
                $.ajax({   
                    type: 'POST',   
                   url: '@Url.Action("GetCountrys")', // we are calling json method     
                    dataType: 'json',   
                    data: { id: $("#SelectedStateID").val() },   
                    success: function (states) {   
                        // states contains the JSON formatted list     
                        // of Countrys passed from the controller     
      
                       $("#SelectedCountryID").append('<option value="' + "0" + '">' + "Select Country" + '</option>');   
                        debugger;   
                        $.each(states, function (i, state) {   
                            $("#SelectedCountryID").append('<option value="' + state.Value + '">' + state.Text + '</option>');   
                           // here we are adding option for Countrys     
                        });   
                    },   
                    error: function (ex) {   
                        alert('Failed to retrieve Country.' + ex);   
                    }   
                });   
                return false;   
           })   
        });     

    but my problem is suppose when there is two dropdown in two column of table of every row then when user select one dropdown then how to find 2nd dropdown in another column of same row to populate. please help me with code sample. thanks

    Thursday, December 17, 2015 8:20 AM

Answers

  • User-1667135504 posted

    Am assuming you having similar table structure.

    First here am adding class to both the Dropdownlist, and instead of ID will use Class to get and set value.


    <table id="myTable"> <tr> <td><select class="ddl_state"><option>--select--</option></select></td> <td><select class="ddl_city"><option>--select--</option></select></td> <td><span class="setData"></span></td> </tr> <tr> <td><select class="ddl_state"><option>--select--</option></select></td> <td><select class="ddl_city"><option>--select--</option></select></td> <td><span class="setData"></span></td> </tr> </table>

    jQuery: 

    $("#myTable tr").on('change', '.ddl_state', function () {
         var self = $(this); // caching $(this)
         var parentTr = self.closest("tr");
    
         // get ddl city value
         var getCityValue = parentTr.find(".ddl_city").val();
    
         //set next column span value
         parentTr.find(".setData").html(getCityValue); 
    });

    Updated: So your code looks like as written below

        // on each row Country selection respected state get populate for specific row
        $("#myTable tr").on('change', '.ddl_county', function () {
            var self = $(this); // caching $(this)
            var parentTr = self.closest("tr");
    
            var getId = self.val();
    
            var currentRowStateDDL = parentTr.find("ddl_states");
    
            // Clear current row States dropdownlist
            currentRowStateDDL.empty();
    
            // Populate current row state
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetCountrys")', // we are calling json method     
                dataType: 'json',
                data: { id: getId },
                success: function (states) {
    
                  var frag = "<option value='0'>-Select-</option>";
    
                    $.each(states, function (i, state) {
                       frag +="<option value="' + state.Value + '">' + state.Text + '</option>";
                    });
    
                    currentRowStateDDL.html(frag);
                  
                },
                error: function (ex) {
                    alert('Failed to retrieve Country.' + ex);
                }
            });
        });

    You check here for some basic jQuery tutorials

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 17, 2015 9:32 AM