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" })

以上是我的下拉菜单，如果我从第一个下拉菜单中选择pin选项，我应该可以将其他下拉列表中的选项过滤为仅equals。由于pin是数字列Contains，因此其他选项没有任何意义。我想用jquery来做。我该怎么做。？我可以查看

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

Answer 1

您可以根据第一个下拉列表的选择

在第二个下拉列表中显示/隐藏选项

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

Answer 2

我认为你需要通过传递“CityColumnSelection”下拉列表中的选定值来创建一个返回SelectListItem的动作。为dropdownlist提供id。首先是“CityColumnSelection”，第二个是“PolicyFilterOptions”。代码如下，

内幕：

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

创建SelectListItem：

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

希望这会有所帮助。

根据以前的asp.net mvc / jquery填写其他下拉列表

2 个答案: