Change the values of dropdown when the values of other dropdown changes

Question

Hi,

I have two drop downs "TestTypes" and "VersionNumber". I am filling the values of these drop downs in Controller from list :

ViewData["TestTypes"] = allowedTestTypes.Distinct().ToList();
ViewData["VersionNumber"] = allowedTestVersions.Distinct().ToList();

In the View I am binding these values like this:

@azzedinehtmlsql .DropDownList("TestTypeName", new SelectList((List<string>)ViewData["TestTypes"]), new { id = "testTypeName" })
@azzedinehtmlsql .DropDownList("VersionNumber", new SelectList((List<string>)ViewData["VersionNumber"]))

I want to change the values of VersionNumber dropdown on the basis of values selected in TestTypeName. Can you please let me know how can I achieve this functionality when a value in dropdown is changed, the content in the other dropdown should change.

Kindly waiting for your response.

Thanks,
Sanosh

Answer 1

This is done with JavaScript and is called cascading dropdowns. Google for lots of examples.

Answer 2

Hi @Santosh Umarani ,
I suggest you could pass TestTypeName value using Jquery ajax to code behind and then you could select the VersionNumber value according the selected values in TestTypeName.
Just like this:

<script type="text/javascript">    
    $(document).ready(function () {    
        $('#TypeName').change(function () {    
            $.ajax({    
                type: "post",    
                url: "/DropDownList/GetDistrict",    
                data: { TypeName: $('#TypeName').val() },    
                datatype: "json",    
                traditional: true,    
                success: function (data) {    
                    .....  
                }    
            });    
        });    
    });    
</script>    

In the code behind:

[HttpPost]    
        public ActionResult GetDistrict(string TypeName)    
        {   
              .......  
             select xxx where TestTypeName==TypeName;  
        }    

Best regards,
Yijing Sun

---

If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our  documentation  to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 3

Thank you YijingSun-MSFT for your response.

I could not get to know what is the below block is for and what I should supposed to do in this block of code?

success: function (data) {
.....
}

Kindly waiting for your response.

Thanks,
Santosh

Answer 4

Thank you YijingSun-MSFT for your response. I am writing the below code in view.

$('#testTypeName').change(function () {
$.ajax({
type: "post",
url: "/TestCases/GetVersionNumber",
data: $("#testTypeName").val(),
dataType: "json",
success: function (data) {
$("#testTypeName").selectItem=data;
}
});
In controller I have this code;

public ActionResult GetVersionNumber(string testTypeName)
{

        string projectName = Request.QueryString["testTypeName"].ToString();
        string projectName1 = Request.QueryString["TestTypeName"].ToString();

        return null;
    }

I am not getting the selected value in "testTypeName" in Controller. I am not getting what mistake I am doing.
Can you please do the needful to get it resolved.

Kindly waiting for your response.

Thanks,
Santosh

Answer 5

This is how I am using dropdownlist:

@azzedinehtmlsql .DropDownList("TestTypeName", new SelectList((List<string>)ViewData["TestTypes"]), new { id = "testTypeName" })