Great Article On Cascading DropDown List and jQuery

Not to poach a blog post/article you need to go to www.mikesdotnetting.com and read his great article on Cascading DropDownLists with jQuery and ASP.NET.

http://www.mikesdotnetting.com/Article/97/Cascading-DropDownLists-with-jQuery-and-ASP.NET

After I read this article I decided to recreate it and build in some features of my own.  The feature I wanted most was a way to preserve the values on post back so that I didn't have to reload the list.  Also I wanted to be able to select the car (radio button) and then post that as well. The approach I took was using hidden variables (<asp:HiddenField />) that got updated as the dropdown list got changed and edited. Then on postback reload the lists based off of the values. If anyone has suggestions to better ways to accomplish the same thing I am listening. Here is the resulting code.

   1: <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
   2:     <script language="javascript" type="text/javascript" src='<%=ResolveClientUrl("~/") %>resources/scripts/jquery.selectboxes.min.js' ></script>
   1:  
   2:     <script type="text/javascript">
   3:         $(function() {
   4:             $('#<%= this.ddlMake.ClientID %>').change(function() {
   5:                 $("#<%= this.hidModel.ClientID %>").val('');
   6:                 $("#<%= this.hidColor.ClientID %>").val('');
   7:                 $("#<%= this.hidSelect.ClientID %>").val('');
   8:                 $('#output').empty();
   9:                 getModels();
  10:             });
  11:             $('#<%= this.ddlModel.ClientID %>').change(function() {
  12:                 $("#<%= this.hidModel.ClientID %>").val($(this).val());
  13:                 $("#<%= this.hidColor.ClientID %>").val('');
  14:                 $("#<%= this.hidSelect.ClientID %>").val('');
  15:                 $('#output').empty();
  16:                 getColors();
  17:             });
  18:             $('#<%= this.ddlColor.ClientID %>').change(function() {
  19:                 $("#<%= this.hidColor.ClientID %>").val($(this).val());
  20:                 $("#<%= this.hidSelect.ClientID %>").val('');
  21:                 $('#output').empty();
  22:                 getCarListByColor();
  23:             });
  24:  
  25:             $('#<%= this.ddlModel.ClientID %>').attr('disabled', true);
  26:             $('#<%= this.ddlColor.ClientID %>').attr('disabled', true);
  27:  
  28:             if ($('#<%= this.ddlMake.ClientID %>').val() != '') {
  29:                 getModels();
  30:             }
  31:  
  32:             $(".carSelect").live("click", function() {
  33:                 $("#<%= this.hidSelect.ClientID %>").val($(this).val());
  34:             });
  35:         });
  36:  
  37:         function getModels() {
  38:              $.ajax({
  39:                 type: "POST",
  40:                 url: "WebServices/CarService.asmx/GetCarsByModel",
  41:                 data: "{make: '" + $('#<%= this.ddlMake.ClientID %>').val() + "'}",
  42:                 contentType: "application/json; charset=utf-8",
  43:                 dataType: "json",
  44:                 success: function(response) {
  45:                     var models = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
  46:                     $('#<%= this.ddlModel.ClientID %>').attr('disabled', false).removeOption(/./).addOption('', ' -- Select Model -- ');
  47:                     $('#<%= this.ddlColor.ClientID %>').attr('disabled', true).removeOption(/./);
  48:                     for (var i = 0; i < models.length; i++) {
  49:                         var val = models[i];
  50:                         var text = models[i];
  51:                         $('#<%= this.ddlModel.ClientID %>').addOption(val, text, (val == $("#<%= this.hidModel.ClientID %>").val()) ? true : false);
  52:                     }
  53:                     if ($('#<%= this.ddlModel.ClientID %>').val() != '')
  54:                     { 
  55:                         getColors();
  56:                     }
  57:                 }
  58:             });
  59:         }
  60:  
  61:         function getColors() {
  62:             $.ajax({
  63:                 type: "POST",
  64:                 url: "WebServices/CarService.asmx/GetCarsByColor",
  65:                 data: "{make: '" + $('#<%= this.ddlMake.ClientID %>').val() + "', model: '" + $('#<%= this.hidModel.ClientID %>').val() + "'}",
  66:                 contentType: "application/json; charset=utf-8",
  67:                 dataType: "json",
  68:                 success: function(response) {
  69:                     var Colors = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
  70:                     $('#<%= this.ddlColor.ClientID %>').attr('disabled', false).removeOption(/./).addOption('', ' -- Select Color -- ');
  71:                     for (var i = 0; i < Colors.length; i++) {
  72:                         var val = Colors[i];
  73:                         var text = Colors[i];
  74:                         $('#<%= this.ddlColor.ClientID %>').addOption(val, text, (val == $("#<%= this.hidColor.ClientID %>").val()) ? true : false);
  75:                     }
  76:                     if ($('#<%= this.ddlColor.ClientID %>').val() != '') {
  77:                         getCarListByColor();
  78:                     }
  79:                 }
  80:             });
  81:         }
  82:  
  83:         function getCarListByColor() {
  84:             $.ajax({
  85:                 type: "POST",
  86:                 url: "WebServices/CarService.asmx/GetCarListByColor",
  87:                 data: "{make: '" + $('#<%= this.ddlMake.ClientID %>').val() + "', " + "model: '" + $('#<%= this.hidModel.ClientID %>').val() + "', " + "color: '" + $('#<%= this.hidColor.ClientID %>').val() + "'}",
  88:                 contentType: "application/json; charset=utf-8",
  89:                 dataType: "json",
  90:                 success: function(response) {
  91:                     var cars = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
  92:                     $('#output').empty();
  93:                     for (var i = 0; i < cars.length; i++) {
  94:                         var checked = ($('#<%= this.hidSelect.ClientID %>').val() == cars[i].ID) ? 'checked' : '';
  95:                         $('#output').append('<p><input class="carSelect" ' + checked + ' type="radio" name="car" value="' + cars[i].ID + '" /><strong>' + cars[i].Make + ' ' +
  96:                               cars[i].Model + '</strong><br /> Year: ' +
  97:                               cars[i].Year + '<br />Doors: ' +
  98:                               cars[i].Doors + '<br />Color: ' +
  99:                               cars[i].Color + '<br />Mileage: ' +
 100:                               cars[i].Mileage + '<br />Price: $' +
 101:                               cars[i].Price + '</p>');
 102:                     }
 103:                 }
 104:             });
 105:         }
 106:     
</script>
   3:  
   4: </asp:Content>
   5: <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
   6:     <div>
   7:         <div>
   8:             <p>
   9:                 <label>
  10:                     Please choose a Make:</label><br />
  11:                 <asp:DropDownList ID="ddlMake" runat="server" />
  12:             </p>
  13:         </div>
  14:         <div>
  15:             <p>
  16:                 <label>
  17:                     Please choose a Model:</label><br />
  18:                 <select ID="ddlModel" runat="server" />
  19:             </p>
  20:         </div>
  21:         <div>
  22:             <p>
  23:                 <label>
  24:                     Please choose a Color:</label><br />
  25:                 <select ID="ddlColor" runat="server" />
  26:             </p>
  27:         </div>
  28:         <div>
  29:             <asp:Button ID="btnSubmit" runat="server" Text="Submit" 
  30:                 onclick="btnSubmit_Click" />
  31:         </div>
  32:         <div id="output">
  33:         </div>
  34:     </div>
  35:     <asp:Label runat="server" ID="lblResults" />
  36:     <asp:HiddenField runat="server" ID="hidModel" />
  37:     <asp:HiddenField runat="server" ID="hidSelect" />
  38:     <asp:HiddenField runat="server" ID="hidColor" />
  39: </asp:Content>

In order to capture the car selected on postback I added an ID to each car. I needed to adjust the car object by adding an ID field.  Here is the resulting code.

   1: using System;
   2: using System.Web;
   3: using System.Web.Services;
   4: using System.Web.Services.Protocols;
   5: using System.Web.Script.Services;
   6: using System.Collections.Generic;
   7: using System.Linq;
   8:  
   9: public class Car
  10: {
  11:     public int ID;
  12:     public string Make;
  13:     public string Model;
  14:     public int Year;
  15:     public int Doors;
  16:     public string Color;
  17:     public float Price;
  18:     public int Mileage;
  19: }
  20:  
  21: /// <summary>
  22: /// Summary description for CarService
  23: /// </summary>
  24: [WebService(Namespace = "http://tempuri.org/")]
  25: [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
  26: [ScriptService]
  27: public class CarService : WebService
  28: {
  29:     List<Car> Cars = new List<Car>{
  30:     new Car{ID=1,Make="Audi",Model="A4",Year=1995,Doors=4,Color="Red",Price=2995f,Mileage=122458},
  31:     new Car{ID=2,Make="Ford",Model="Focus",Year=2002,Doors=5,Color="Black",Price=3250f,Mileage=68500},
  32:     new Car{ID=3,Make="BMW",Model="5 Series",Year=2006,Doors=4,Color="Grey",Price=24950f,Mileage=19500},
  33:     new Car{ID=4,Make="Renault",Model="Laguna",Year=2000,Doors=5,Color="Red",Price=3995f,Mileage=82600},
  34:     new Car{ID=5,Make="Toyota",Model="Previa",Year=1998,Doors=5,Color="Green",Price=2695f,Mileage=72400},
  35:     new Car{ID=6,Make="Mini",Model="Cooper",Year=2005,Doors=2,Color="Grey",Price=9850f,Mileage=19800},
  36:     new Car{ID=7,Make="Mazda",Model="MX 5",Year=2003,Doors=2,Color="Silver",Price=6995f,Mileage=51988},
  37:     new Car{ID=8,Make="Ford",Model="Fiesta",Year=2004,Doors=3,Color="Red",Price=3759f,Mileage=50000},
  38:     new Car{ID=9,Make="Honda",Model="Accord",Year=1997,Doors=4,Color="Silver",Price=1995f,Mileage=99750},
  39:     new Car{ID=10,Make="Audi",Model="A6",Year=2005,Doors=5,Color="Silver",Price=22995f,Mileage=25400},
  40:     new Car{ID=11,Make="Jaguar",Model="XJS",Year=1992,Doors=4,Color="Green",Price=3450,Mileage=92000},
  41:     new Car{ID=12,Make="Jaguar",Model="X Type",Year=2006,Doors=4,Color="Grey",Price=9950f,Mileage=17000},
  42:     new Car{ID=13,Make="Renault",Model="Megane",Year=2007,Doors=5,Color="Red",Price=8995f,Mileage=8500},
  43:     new Car{ID=14,Make="Peugeot",Model="406",Year=2003,Doors=4,Color="Grey",Price=3450f,Mileage=86000},
  44:     new Car{ID=15,Make="Mini",Model="Cooper S",Year=2008,Doors=2,Color="Black",Price=14850f,Mileage=9500},
  45:     new Car{ID=16,Make="Mazda",Model="5",Year=2006,Doors=5,Color="Silver",Price=6940f,Mileage=53500},
  46:     new Car{ID=17,Make="Vauxhall",Model="Vectra",Year=2007,Doors=5,Color="White",Price=13750f,Mileage=31000},
  47:     new Car{ID=18,Make="Ford",Model="Puma",Year=1998,Doors=3,Color="Silver",Price=2995f,Mileage=84500},
  48:     new Car{ID=19,Make="Ford",Model="Ka",Year=2004,Doors=3,Color="Red",Price=2995f,Mileage=61000},
  49:     new Car{ID=20,Make="Ford",Model="Focus",Year=2007,Doors=5,Color="Blue",Price=9950f,Mileage=19000},
  50:     new Car{ID=21,Make="BMW",Model="3 Series",Year=2001,Doors=4,Color="White",Price=5950f,Mileage=98000},
  51:     new Car{ID=22,Make="Citroen",Model="C5",Year=2005,Doors=5,Color="Silver",Price=5995f,Mileage=38400},
  52:     new Car{ID=23,Make="Toyota",Model="Corolla T3",Year=2004,Doors=5,Color="Blue",Price=5995f,Mileage=71000},
  53:     new Car{ID=24,Make="Toyota",Model="Yaris",Year=2005,Doors=3,Color="Grey",Price=5350f,Mileage=39000},
  54:     new Car{ID=25,Make="Porsche",Model="911",Year=2003,Doors=2,Color="Red",Price=16995f,Mileage=88000},
  55:     new Car{ID=26,Make="Ford",Model="Fiesta",Year=2004,Doors=3,Color="Red",Price=5759f,Mileage=49000},
  56:     new Car{ID=27,Make="Honda",Model="Accord",Year=1996,Doors=4,Color="Black",Price=1995f,Mileage=105000},
  57:     new Car{ID=28,Make="Audi",Model="A3 Avant",Year=2005,Doors=5,Color="Blue",Price=12995f,Mileage=22458},
  58:     new Car{ID=29,Make="Ford",Model="Mondeo",Year=2007,Doors=5,Color="Gold",Price=12250f,Mileage=8500},
  59:     new Car{ID=30,Make="BMW",Model="1 Series",Year=2006,Doors=4,Color="Black",Price=16950f,Mileage=19500},
  60:     new Car{ID=31,Make="Renault",Model="Clio",Year=2005,Doors=3,Color="Red",Price=5995f,Mileage=32600},
  61:     new Car{ID=32,Make="Toyota",Model="Verso",Year=2008,Doors=5,Color="White",Price=12995f,Mileage=5800},
  62:     new Car{ID=33,Make="Mini",Model="Cooper",Year=2003,Doors=2,Color="Black",Price=7950f,Mileage=36800},
  63:     new Car{ID=34,Make="Mazda",Model="6",Year=2007,Doors=4,Color="Blue",Price=16995f,Mileage=11300},
  64:     new Car{ID=35,Make="Ford",Model="Mondeo",Year=2004,Doors=5,Color="Green",Price=8759f,Mileage=66000},
  65:     new Car{ID=36,Make="Honda",Model="Civic",Year=1997,Doors=4,Color="Grey",Price=1995f,Mileage=99750},
  66:     new Car{ID=37,Make="Audi",Model="Q7",Year=2005,Doors=5,Color="Black",Price=22995f,Mileage=25400},
  67:     new Car{ID=38,Make="Jaguar",Model="XK8",Year=1992,Doors=4,Color="Blue",Price=3450,Mileage=92000},
  68:     new Car{ID=39,Make="Jaguar",Model="S Type",Year=2006,Doors=4,Color="Red",Price=9950f,Mileage=17000},
  69:     new Car{ID=40,Make="Renault",Model="Megane",Year=2007,Doors=5,Color="Yellow",Price=8995f,Mileage=8500},
  70:     new Car{ID=41,Make="Peugeot",Model="406",Year=2003,Doors=4,Color="White",Price=3450f,Mileage=86000},
  71:     new Car{ID=42,Make="Mini",Model="Cooper",Year=2008,Doors=2,Color="Red",Price=14850f,Mileage=9500},
  72:     new Car{ID=43,Make="Mazda",Model="5",Year=2006,Doors=5,Color="White",Price=6940f,Mileage=53500},
  73:     new Car{ID=44,Make="Vauxhall",Model="Vectra",Year=2007,Doors=5,Color="Blue",Price=13750f,Mileage=31000},
  74:     new Car{ID=45,Make="Ford",Model="Puma",Year=1998,Doors=3,Color="Red",Price=2995f,Mileage=84500},
  75:     new Car{ID=46,Make="Ford",Model="Puma",Year=2004,Doors=3,Color="Red",Price=2995f,Mileage=61000},
  76:     new Car{ID=47,Make="Ford",Model="Focus",Year=2007,Doors=5,Color="Grey",Price=9950f,Mileage=19000},
  77:     new Car{ID=48,Make="BMW",Model="3 Series",Year=2001,Doors=4,Color="Red",Price=5950f,Mileage=98000},
  78:     new Car{ID=49,Make="Citroen",Model="C5",Year=2005,Doors=5,Color="Yellow",Price=5995f,Mileage=38400},
  79:     new Car{ID=50,Make="Toyota",Model="Corolla T3",Year=2004,Doors=5,Color="Red",Price=5995f,Mileage=71000},
  80:     new Car{ID=51,Make="Toyota",Model="Yaris",Year=2005,Doors=3,Color="Black",Price=5350f,Mileage=39000},
  81:     new Car{ID=52,Make="Porsche",Model="911",Year=2003,Doors=2,Color="White",Price=16995f,Mileage=88000},
  82:     new Car{ID=53,Make="Ford",Model="Fiesta",Year=2004,Doors=3,Color="Grey",Price=5759f,Mileage=49000},
  83:     new Car{ID=54,Make="Honda",Model="Accord",Year=1996,Doors=4,Color="Green",Price=1995f,Mileage=105000}
  84:     };
  85:  
  86:     [WebMethod]
  87:     public List<Car> GetCarsByDoors(int doors)
  88:    {
  89:         var query = from c in Cars
  90:                     where c.Doors == doors
  91:                     select c;
  92:         return query.ToList();
  93:     }
  94:  
  95:     [WebMethod]
  96:     public List<Car> GetAllCars()
  97:    {
  98:         return Cars;
  99:     }
 100:  
 101:     [WebMethod]
 102:     public List<string> GetCarMakes()
 103:    {
 104:         var query = (from c in Cars
 105:                      orderby c.Make
 106:                      select c.Make).Distinct();
 107:         return query.ToList();
 108:     }
 109:  
 110:     [WebMethod]
 111:     public List<string> GetCarsByModel(string make)
 112:    {
 113:         var query = (from c in Cars
 114:                      where c.Make == make
 115:                      orderby c.Model
 116:                      select c.Model).Distinct();
 117:         return query.ToList();
 118:     }
 119:  
 120:     [WebMethod]
 121:     public List<string> GetCarsByColor(string make, string model)
 122:    {
 123:         var query = (from c in Cars
 124:                      where c.Make == make && c.Model == model
 125:                      orderby c.Color
 126:                      select c.Color).Distinct();
 127:         return query.ToList();
 128:     }
 129:  
 130:     [WebMethod]
 131:     public List<Car> GetCarListByColor(string make, string model, string color)
 132:    {
 133:         var query = from c in Cars
 134:                     where (c.Make == make &&
 135:                     c.Model == model &&
 136:                     c.Color == color)
 137:                     select c;
 138:         return query.ToList();
 139:     }
 140: }

Please note that I renamed colour to color throughout my project and I store my webservice (asmx) page in a folder called WebServcies. Also I am using a MasterPage so I used the $("#<%= this.<CONTROLID>.ClientID %>") name throught out the code.

Published Friday, August 28, 2009 4:53 PM by rojay12

Comments

# re: Great Article On Cascading DropDown List and jQuery

Friday, February 19, 2010 11:18 AM by kali_mist

Do me a favour mate. Can you fix the markup so that line 65 comes after line 64 and not 43. I have just spent an hour debugging JS.

The example is cool though. Cheers

# re: Great Article On Cascading DropDown List and jQuery

Monday, April 5, 2010 12:23 PM by rojay12

My Bad Done. I wonder how the hell that happened.

# re: Great Article On Cascading DropDown List and jQuery

Thursday, July 14, 2011 3:37 AM by imark

Thanks, great article

# re: Great Article On Cascading DropDown List and jQuery

Thursday, March 1, 2012 11:01 AM by Anil

Can you give a ZIP link combining all...

# re: Great Article On Cascading DropDown List and jQuery

Thursday, July 19, 2012 2:55 PM by John Thalluri

Can you please send me your code at my account oliveson@yahoo.com

# re: Great Article On Cascading DropDown List and jQuery

Thursday, April 18, 2013 11:38 PM by mike

Can you please send me your code at my account orientalboy2000@yahoo.com

tnx