CODEWITHSUNDEEP
jqueryasp.net-mvc
user2998990
user2998990

Reputation: 980

Fill other dropdown depending on previous asp.net mvc/jquery

    @Html.DropDownList("CityColumnSelection", new List<SelectListItem>()
    { new SelectListItem { Text = "City Name", Value = "CityName" },
    new SelectListItem { Text = "PIN", Value = "PIN" } ,
    }, "Select Column", new { @class = "filterDropDownDiv" })


    @Html.DropDownList("FilterOptions", new List<SelectListItem>()
    { new SelectListItem { Text = "Begins with", Value = "StartsWith" },
    new SelectListItem { Text = "Contains", Value = "Contains" } ,
    new SelectListItem { Text = "Doesn't contain", Value = "Not Contains" } ,
    new SelectListItem { Text = "Ends with", Value = "EndsWith" },
    new SelectListItem { Text = "Equals", Value = "5" },
    new SelectListItem { Text = "Doesn't equal", Value = "6" }
    }, "Select Filter", new { @class = "filterDropDownDiv" })

Above are my dropdowns, where If i select the pin option from 1st dropdown, I should be able to filter out the options from the other dropdown to only equals. As the pin is a numeric column Contains and other options will not make any sense. I have want to do it using jquery. How can i do it.? Can i check on the

$("#dropdown").change(function () { function and manually make the other options visible true or false.? Or is there any other method.?

Upvotes: 0

Views: 159

Answers (2)

user3559349
user3559349

Reputation:

You can show/hide options in the second dropdown based on the selection of the first dropdown

var policyOptions = $('#PolicyFilterOptions');
var options = $('#PolicyFilterOptions option');
var equalOption = $('#PolicyFilterOptions option[value="5"]');
$('#CityColumnSelection').change(function () {
  if ($(this).val() == 'PIN') {
    options.hide();
    equalOption.show();
    policyOptions.val('5');
  } else {
    options.show();
    policyOptions.val('');
  }
});

Upvotes: 1

Harun
Harun

Reputation: 5179

I think you need to create an action that returns a SelectListItem by Passing the selected value from the "CityColumnSelection" dropdownlist. Give an id for both the dropdownlist.Say id for first is "CityColumnSelection" and that of second is "PolicyFilterOptions". The code follows,

Inside Script:

  $(document).ready(function(){
   $("#CityColumnSelection").change(function () {
     var CityColumnSelection= $(.filterDropDownDiv option:selected).val();
        $.ajax({
            type: 'POST',
            url: '@Url.Action("Get")', // we are calling json method 
            dataType: 'json', 
            data: { selectedValue: CityColumnSelection },
            success: function (returnedList) {
                // returnedList contains the JSON formatted list
                // of created as SelectListItem passed from the controller 
                $.each(returnedList, function (i, item) {                  
                $("#PolicyFilterOptions").append('<option value="' + item.Value + '">' +  
                     item.Text + '</option>');                                                                                                
                //This will populate the second dropdownlist 
                });  
                });
            },
            error: function (ex) {
                alert('Failed to retrieve data.' + ex);
            }
        });
        return false;
    })
  });
});

Creating SelectListItem:

        var sampleSelectListItem = new List<SelectListItem>();
        sampleSelectListItem .Add(new SelectListItem { Text = "Equals", Value = "5" });

Hope this helps.

Upvotes: 0

Related Questions