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

Question

    @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.?

you could also have a look at Knockout js, which does an excellent job of options binding: knockoutjs.com/documentation/options-binding.html — Daniël Tulp
– Daniël Tulp, Commented Mar 25, 2015 at 9:51

user3559349 · Accepted Answer · 2015-03-25 09:20:14Z

1

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('');
  }
});

answered Mar 25, 2015 at 9:20

user3559349

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

Comments

Harun · Accepted Answer · 2015-03-25 09:14:47Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related