Use jQuery to change a second select list based on the first select list option

Question

I have two selects    lt select name  select1  id  select1  gt       lt option value  1  gt Fruit lt  option gt       lt option value  2  gt Animal lt  option gt       lt option value  3  gt Bird lt  option gt       lt option value  4  gt Car lt  option gt   lt  select gt    lt select name  select2  id  select2  gt       lt option value  1  gt Banana lt  option gt       lt option value  1  gt Apple lt  option gt       lt option value  1  gt Orange lt  option gt       lt option value  2  gt Wolf lt  option gt       lt option value  2  gt Fox lt  option gt       lt option value  2  gt Bear lt  option gt       lt option value  3  gt Eagle lt  option gt       lt option value  3  gt Hawk lt  option gt       lt option value  4  gt BWM lt option gt   lt  select gt    How do I do that with jQuery if I choose Fruit in the first select  The second select would show me only Fruits - Banana  Apple  Orange  If I choose Bird in the first select  the second select would show me only Birds - Eagle  Hawk  And so on     I tried to do it with this piece of jQuery code       select1   change function         var id     this  val            select2 option value    id      remove          Unfortunately  it removes almost everything  and I have no idea how to bring back some options  I also read something about clone  but I don t know how to use it in this case

User · Answer

I have found the solution as followiing    working for me perfectly        document  ready function        selectbox1   change function         var id     this  val            selectbox2   val id

User · Answer

I built on sabithpocker s idea and made a more generalized version that lets you control more than one selectbox from a given trigger    I assigned the selectboxes I wanted to be controlled the classname  switchable   and cloned them all like this    j this  data  options   j  select switchable option   clone       and used a specific naming convention for the switchable selects  which could also translate into classes  In my case   category  and  issuer  were the select names  and  category 2  and  issuer 1  the class names   Then I ran an   each on the select switchable groups  after making a copy of   this  for use inside the function   var that   this   j  select switchable   each function          var thisname    j this  attr  name        var theseoptions    j that  data  options   filter        thisname         id         j this  html theseoptions              By using a classname on the ones you want to control  the function will safely ignore other selects elsewhere on the page  such as the last one in the example on Fiddle     Here s a Fiddle with the complete code

User · Answer

x000D   x000D      select1   change function     x000D    if    this  data  options       undefined    x000D        Taking an array of all options-2 and kind of embedding it on the select1   x000D        this  data  options       select2 option   clone     x000D      x000D    var id     this  val    x000D    var options     this  data  options   filter   value     id         x000D        select2   html options   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 0 0 jquery min js  gt  lt  script gt  x000D   lt select name  select1  id  select1  gt  x000D     lt option value  1  gt Fruit lt  option gt  x000D     lt option value  2  gt Animal lt  option gt  x000D     lt option value  3  gt Bird lt  option gt  x000D     lt option value  4  gt Car lt  option gt  x000D   lt  select gt  x000D   x000D   x000D   lt select name  select2  id  select2  gt  x000D     lt option value  1  gt Banana lt  option gt  x000D     lt option value  1  gt Apple lt  option gt  x000D     lt option value  1  gt Orange lt  option gt  x000D     lt option value  2  gt Wolf lt  option gt  x000D     lt option value  2  gt Fox lt  option gt  x000D     lt option value  2  gt Bear lt  option gt  x000D     lt option value  3  gt Eagle lt  option gt  x000D     lt option value  3  gt Hawk lt  option gt  x000D     lt option value  4  gt BWM lt option gt  x000D   lt  select gt  x000D   x000D   x000D    Using jQuery data   to store data     I guess hiding elements doesn t work cross-browser 2012   I have nt tested   it myself

User · Answer

All of these methods are great   I have found another simple resource that is a great example of creating a dynamic form using  onchange  with AJAX   http   www w3schools com php php ajax database asp  I simply modified the text table output to anther select dropdown populated based on the selection of the first drop down   For my application a user will select a state then the second dropdown will be populated with the cities for the selected state   Much like the JSON example above but with php and mysql

User · Answer

Store all  select2 s options in a variable  filter them according to the value of the chosen option in  select1  and set them using  html   in  select2   var  select1        select1          select2        select2          options    select2 find   option       select1 on  change   function          select2 html  options filter   value      this value              trigger  change       Here s a fiddle

User · Answer

I wanted to make a version of this that uses   getJSON   from a separate JSON file   Demo  here  JavaScript     document  ready function           use strict        var selectData   states       function updateSelects             var cities     map selectData this value   function  city                return     lt option   gt    text city                           city names   empty   append cities                getJSON  updateSelect json   function  data            var state          selectData   data           states       us states   on  change   updateSelects           for  state in selectData                    lt option   gt    text state  appendTo  states                      states change                  HTML    lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt  lt  title gt       lt script src  https   ajax googleapis com ajax libs jquery 1 8 2 jquery min js  gt  lt  script gt   lt  head gt   lt body gt       lt select id  us states  gt  lt  select gt       lt select id  city names  gt  lt  select gt       lt script type  text javascript  src  updateSelect js  gt  lt  script gt   lt  body gt   lt  html gt    JSON          NE              Smallville            Bigville              CA              Sunnyvale            Druryburg            Vickslake              MI              Lakeside            Fireside            Chatsville

User · Answer

Try to use it    Drop-down box dependent on the option selected in another drop-down box  Use jQuery to change a second select list based on the first select list option    lt asp HiddenField ID  hdfServiceId  ClientIDMode  Static  runat  server  Value  0    gt   lt asp TextBox ID  txtOfferId  CssClass  hidden  ClientIDMode  Static  runat  server  Text  0    gt   lt asp HiddenField ID  SelectedhdfServiceId  ClientIDMode  Static  runat  server  Value  0    gt   lt asp HiddenField ID  SelectedhdfOfferId  ClientIDMode  Static  runat  server  Value  0    gt    lt div class  col-lg-2 col-md-2 col-sm-12  gt       lt span gt Service lt  span gt       lt asp DropDownList ID  ddlService  ClientIDMode  Static  runat  server  CssClass  form-control  gt       lt  asp DropDownList gt   lt  div gt   lt div class  col-lg-2 col-md-2 col-sm-12  gt       lt span gt Offer lt  span gt       lt asp DropDownList ID  ddlOffer  ClientIDMode  Static  runat  server  CssClass  form-control  gt       lt  asp DropDownList gt   lt  div gt    Use jQuery library in your web page    lt script type  text javascript  gt        document  ready function              ucBindOfferByService                ddlOffer   val     txtOfferId   val                      ddlOffer   on  change   function                  txtOfferId   val     ddlOffer   val                      ddlService   on  change   function                  SelectedhdfOfferId   val  0            SetServiceIds            var SelectedServiceId       ddlService   val                SelectedhdfServiceId   val SelectedServiceId           if  SelectedServiceId     0                       ucBindOfferByService            SetOfferIds                 function ucBindOfferByService             GetVendorOffer            var SelectedServiceId       ddlService   val            if  SelectedServiceId     0                     ddlOffer   empty                    ddlOffer   append     lt option gt  lt  option gt    val  0   html  All                       else                   ddlOffer   empty                  document ucVendorServiceList  each function                      if      ddlOffer   html   length     0                             ddlOffer   append     lt option gt  lt  option gt    val  0   html  All                                           ddlOffer   append     lt option gt  lt  option gt    val this OfferId  html this OfferName                                         function GetVendorOffer             var param   JSON stringify   UserId      hdfUserId   val    ServiceId      ddlService   val               AjaxCall  DemoPage aspx    GetOfferList   param  OnGetOfferList  AjaxCallError              function OnGetOfferList response            if  response d length  gt  0              document ucVendorServiceList   JSON parse response d              function SetServiceIds             var SelectedServiceId       ddlService   val            var ServiceIdCSV                if  SelectedServiceId     0                     ddlService  gt  option   each function                       ServiceIdCSV      this  val                                            else               ServiceIdCSV    SelectedServiceId                              hdfServiceId   val ServiceIdCSV              function SetOfferIds             var SelectedServiceId       ddlService   val            var OfferIdCSV                if  SelectedServiceId     0                   document ucVendorServiceList  each function                      OfferIdCSV    this OfferId                                          else               var SelectedOfferId       ddlOffer   val                if  SelectedOfferId     0                         ddlOffer  gt  option   each function                          OfferIdCSV      this  val                                                        else                   OfferIdCSV    SelectedOfferId                                       lt  script gt    Use Backend code in your web page   protected void Page Load object sender  EventArgs e        if   IsPostBack                ServiceList             public void ServiceList         ManageReport manageReport   new ManageReport        DataTable ServiceList   new DataTable        ServiceList   manageReport GetServiceList        ddlService DataSource   ServiceList      ddlService DataTextField    serviceName       ddlService DataValueField    serviceId       ddlService DataBind        ddlService Items Insert 0  new ListItem  All    0        public DataTable GetServiceList         SqlParameter   PM   new SqlParameter                 new SqlParameter   Mode       Mode Name                new SqlParameter   UserID    UserId                      return SqlHelper ExecuteDataset new SqlConnection SqlHelper GetConnectionString     CommandType StoredProcedure   Sp Name   PM  Tables 0       WebMethod  public static String GetOfferList int UserId  String ServiceId        var sOfferList           try               CommonUtility utility   new CommonUtility            ManageReport manageReport   new ManageReport            manageReport UserId   UserId          manageReport ServiceId   ServiceId          DataSet dsOfferList   manageReport GetOfferList            if  utility ValidateDataSet dsOfferList                           DataRow dr   dsEmployerUserDepartment Tables 0  NewRow                  dr 0     0                  dr 1     All                 dsEmployerUserDepartment Tables 0  Rows InsertAt dr  0               sOfferList   utility ConvertToJSON dsOfferList Tables 0                      return sOfferList            catch  Exception ex                return  Error Message      ex Message           public DataSet GetOfferList         SqlParameter   sqlParameter   new SqlParameter                                                                                              new SqlParameter   Mode           Mode Name                    new SqlParameter   UserID        UserId                        new SqlParameter   ServiceId     ServiceId                       return SqlHelper ExecuteDataset new SqlConnection SqlHelper GetConnectionString     CommandType StoredProcedure   Sp Name   sqlParameter

User · Answer

On the selected answer I see that when initially the page is loaded the selection of first option is prior fixed and therefore gives the option of all the categories in selection 2   You can avoid that by adding the first option as the following in both the select tag -   lt option value  none  selected disabled hidden gt Select an Option lt  option gt    lt select name  select1  id  select1  gt   lt option value  none  selected disabled hidden gt Select an Option lt  option gt   lt option value  1  gt Fruit lt  option gt     lt option value  2  gt Animal lt  option gt     lt option value  3  gt Bird lt  option gt     lt option value  4  gt Car lt  option gt   lt  select gt     lt select name  select2  id  select2  gt   lt option value  none  selected disabled hidden gt Select an Option lt  option gt     lt option value  1  gt Banana lt  option gt     lt option value  1  gt Apple lt  option gt     lt option value  1  gt Orange lt  option gt     lt option value  2  gt Wolf lt  option gt     lt option value  2  gt Fox lt  option gt     lt option value  2  gt Bear lt  option gt     lt option value  3  gt Eagle lt  option gt     lt option value  3  gt Hawk lt  option gt     lt option value  4  gt BWM lt option gt   lt  select gt

[jquery] Use jQuery to change a second select list based on the first select list option

Examples related to jquery

Examples related to html

Examples related to select