title: Enabling another dropdown options after selecting option from one dropdown using jquery
body: <p>I am using this 4 dropdowns.When page loads only 'Size' dropdown should enable remaining should not enable.When I am selecting any one option from Size dropdown the next style dropdown should enable and this is same for all dropdown.Means next dropdown is depanded on previous.When I select option from last dropdown the search button should display,which I am hiding when page loads.I have taken image as search button.I need simple jquery code for this.Please help me out.
          Please see bellow code:</p>
  
  <pre><code>    &lt;div class="combotitle"&gt;Size&lt;/div&gt;
          &lt;form&gt;
          &lt;select id="Size" name="Size" class="select" 
          style="width:206px; border:#de73ff solid 1px; color:#444444;"&gt;
          &lt;option selected="selected"&gt;Size&lt;/option&gt;
          &lt;option&gt;Size&lt;/option&gt;
          &lt;option&gt;Size&lt;/option&gt;
          &lt;option&gt;Size&lt;/option&gt;
          &lt;/select&gt;
          &lt;/form&gt;
  
          &lt;div class="combotitle"&gt;Style&lt;/div&gt;
          &lt;form&gt;
          &lt;select id="Style" name="Style" class="select" 
          style="width:206px; border:#de73ff solid 1px; color:#444444;"&gt;
          &lt;option selected="selected"&gt;Style&lt;/option&gt;
          &lt;option&gt;Style&lt;/option&gt;
          &lt;option&gt;Style&lt;/option&gt;
          &lt;option&gt;Style&lt;/option&gt;
          &lt;/select&gt;
          &lt;/form&gt;
  
          &lt;div class="combotitle"&gt;Color&lt;/div&gt;
          &lt;form&gt;
          &lt;select id="Color" name="Color" class="select" 
          style="width:206px; border:#de73ff solid 1px; color:#444444;"&gt;
          &lt;option selected="selected"&gt;Color&lt;/option&gt;
          &lt;option&gt;Color&lt;/option&gt;
          &lt;option&gt;Color&lt;/option&gt;
          &lt;option&gt;Color&lt;/option&gt;
          &lt;/select&gt;
          &lt;/form&gt;
  
          &lt;div class="combotitle"&gt;Brand&lt;/div&gt;
          &lt;form&gt;
          &lt;select id="Brand" name="Brand" class="select" 
          style="width:206px; border:#de73ff solid 1px; color:#444444;"&gt;
          &lt;option selected="selected"&gt;Brand&lt;/option&gt;
          &lt;option&gt;Brand&lt;/option&gt;
          &lt;option&gt;Brand&lt;/option&gt;
          &lt;option&gt;Brand&lt;/option&gt;
          &lt;/select&gt;
          &lt;/form&gt;
  
      &lt;div class="CatsearchButton"&gt;
        &lt;a href="#"&gt;&lt;img src="/searchprd.png" alt="Search" title="Search" /&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
  
  
  &lt;!---------------------------------------------------------------&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Product_Page&lt;/title&gt;
  &lt;link href="css/product_page.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
  &lt;div class="Prdhead"&gt;
  
  &lt;!--wrapper start--&gt;
  &lt;div id="Prdheawrap"&gt;
  
  &lt;div class="Prdheader"&gt;
  &lt;div class="PrdheadeLeft"&gt;
  &lt;div class="shopbyprd"&gt;&lt;img src="/v/vspfiles/assets/images/shopbycategory_prdct.png" alt="" /&gt;&lt;/div&gt;
  &lt;div class="catMenu"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Bra Category Option-1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Bra Category Option-2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Bra Category Option-3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Bra Category Option-4&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Bra Category Option-5&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Bra Category Option-6&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="PrdheadRight"&gt;
  &lt;div class="PrdformBox"&gt;
  &lt;div class="CatTitle"&gt;&lt;img src="/v/vspfiles/assets/images/perfetcbra.png" alt="" /&gt;&lt;/div&gt;
  
  &lt;div class="formContainer"&gt;
  &lt;div class="combotitle"&gt;Size&lt;/div&gt;
  &lt;form&gt;
  &lt;select id="Make" name="Make" class="select" onchange="test1(this.value)"
      style="width:206px; border:#de73ff solid 1px; color:#444444;"&gt;
  &lt;option selected="selected"&gt;Size&lt;/option&gt;
  &lt;option&gt;Size&lt;/option&gt;
  &lt;option&gt;Size&lt;/option&gt;
  &lt;option&gt;Size&lt;/option&gt;
  &lt;/select&gt;
  &lt;/form&gt;
  
  &lt;div class="combotitle"&gt;Style&lt;/div&gt;
  &lt;form&gt;
  &lt;select class="select" id="year" name="year" onchange="test2(this.value)" 
      style="width:206px; border:#de73ff solid 1px; color:#444444;"&gt;
  &lt;option selected="selected"&gt;Style&lt;/option&gt;
  &lt;option&gt;Style&lt;/option&gt;
  &lt;option&gt;Style&lt;/option&gt;
  &lt;option&gt;Style&lt;/option&gt;
  &lt;/select&gt;
  &lt;/form&gt;
  
  &lt;div class="combotitle"&gt;Color&lt;/div&gt;
  &lt;form&gt;
  &lt;select class="select" id="model" name="model" onchange="test3(this.value)" 
       style="width:206px; border:#de73ff solid 1px; color:#444444;"&gt;
  &lt;option selected="selected"&gt;Color&lt;/option&gt;
  &lt;option&gt;Color&lt;/option&gt;
  &lt;option&gt;Color&lt;/option&gt;
  &lt;option&gt;Color&lt;/option&gt;
  &lt;/select&gt;
  &lt;/form&gt;
  
  &lt;div class="combotitle"&gt;Brand&lt;/div&gt;
  &lt;form&gt;
  &lt;select class="select" id="model2" name="model2" onchange="test4(this.value)"  
       style="width:206px; border:#de73ff solid 1px; color:#444444;"&gt;
  &lt;option selected="selected"&gt;Brand&lt;/option&gt;
  &lt;option&gt;Brand&lt;/option&gt;
  &lt;option&gt;Brand&lt;/option&gt;
  &lt;option&gt;Brand&lt;/option&gt;
  &lt;/select&gt;
  &lt;/form&gt;
  
  &lt;div class="catBotBox"&gt;
  &lt;div class="checkbox"&gt;
  &lt;input type="checkbox" /&gt;
  &lt;/div&gt;
  &lt;div class="checktxt"&gt;
  Sale Items&lt;br  /&gt; Only&lt;/div&gt;
  &lt;div class="CatsearchButton"&gt;
      &lt;a href="#"&gt;
          &lt;img src="/v/vspfiles/assets/images/searchprd.png" 
          alt="Search" title="Search" onclick="callRedir(model.value)" 
          style="display:none" /&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="data" style="display:none"&gt;&lt;/div&gt;  
  
  
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;!--wrapper end--&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
              var jSelect1=$("select[name='Make']");
                jSelect1.attr('disabled', 'disabled');
  
              var jSelect2=$("select[name='year']");
                jSelect2.attr('disabled', 'disabled');
  
              var jSelect3=$("select[name='model']");
                jSelect3.attr('disabled', 'disabled');
  
                var jSelect4=$("select[name='model2']");
                jSelect4.attr('disabled', 'disabled');
  
              &lt;/script&gt;
  
              &lt;script type="text/javascript"&gt;
  
              function test1(val) 
              {
  
              var jSelect2=$("select[name='year']");
                jSelect2.attr('disabled', 'disabled');
  
              var jSelect3=$("select[name='model']");
                jSelect3.attr('disabled', 'disabled');
  
                dataRead(val);
  
              }
  
          function dataRead(valData)
          {
  
            // $("#list1").append('&lt;img class="select" align="middle" id="img1"
                // width=22px height=23px src="/v/vspfiles/assets/images/loading_circle-
                //sm.gif"&gt;');
             var html="";
              $.ajax({
               type: "GET",
               url: valData,
               dataType: "html",
               async:false,
               cache: true,
               success: function(data){
  
                   if(data)
                   {
                    html=data;
  
                   }
               }
  
            });             
  
             var options1='&lt;option value=""&gt;[ Select Your Series ]&lt;/option&gt;';
            cn=$(html).find('div').each(function(){
  
            if($(this).attr('class')=='right')
            {
                var cnt=$(this).find('a').each(function(){
  
                  if($(this).attr('class')=='subcategory_link')
                  {
  
                  options1=options1+'&lt;option 
                              value='+$(this).attr('href')+'&gt;'+$(this).text()+'&lt;/option&gt;'
                  }
  
                }).length;
  
                //alert(cnt);
  
            }
            }).length;
              $('#year').html("");
              var jSelect=$("select[name='year']");
                      jSelect.removeAttr('disabled');
             $('#year').append(options1); 
  
            // $("#img1").attr('src',"");
  
              //$("#text1").html('');         
  
          }
              function test2(val) 
              {
  
                var jSelect3=$("select[name='model']");
                jSelect3.attr('disabled', 'disabled');
  
  
                var jSelect4=$("select[name='model2']");
                jSelect4.attr('disabled', 'disabled');
  
                dataRead2(val);
  
              }
  
  
              function dataRead2(valData)
          {
  
           //$("#new1").append('&lt;img class="select" align="middle" id="img2" 
               //width=22px height=23px 
               //src="/v/vspfiles/assets/images/loading_circle-sm.gif"&gt;');
             var html="";
              $.ajax({
               type: "GET",
               url: valData,
               dataType: "html",
               async:false,
               cache: true,
               success: function(data){
  
                   if(data)
                   {
                    html=data;
  
                   }
               }
  
            });
  
  
             var options1='&lt;option value=""&gt;[ Select Your Cartridge# ]&lt;/option&gt;';
            cn=$(html).find('div').each(function(){
  
            if($(this).attr('class')=='right')
            {
                var cnt=$(this).find('a').each(function(){
  
                  if($(this).attr('class')=='subcategory_link')
                  {
  
                  options1=options1+'&lt;option value='+$(this).attr('href')+'&gt;'+$(this).text()+'&lt;/option&gt;'
                  }
  
                }).length;
  
                //alert(cnt);
  
            }
            }).length;
              $('#model').html("");
  
              var jSelect=$("select[name='model']");
                      jSelect.removeAttr('disabled');
             $('#model').append(options1); 
  
            // $("#img2").attr('src',"");
  
          }
  
  &lt;!--    #########   --&gt; 
      function test3(val) 
              {
  
                var jSelect4=$("select[name='model2']");
                jSelect4.attr('disabled', 'disabled');
  
                dataRead3(val);
  
              }
  
  
              function dataRead3(valData)
          {
  
           //$("#new1").append('&lt;img class="select" align="middle" id="img2"
               // width=22px height=23px src="/v/vspfiles/assets/images/loading_circle-
               //sm.gif"&gt;');
             var html="";
              $.ajax({
               type: "GET",
               url: valData,
               dataType: "html",
               async:false,
               cache: true,
               success: function(data){
  
                   if(data)
                   {
                    html=data;
  
                   }
               }
  
            });             
  
             var options1='&lt;option value=""&gt;[ Select Your Cartridge# ]&lt;/option&gt;';
            cn=$(html).find('div').each(function(){
  
            if($(this).attr('class')=='right')
            {
                var cnt=$(this).find('a').each(function(){
  
                  if($(this).attr('class')=='subcategory_link')
                  {
  
                  options1=options1+'&lt;option value='+$(this).attr('href')+'&gt;'+$(this).text()+'&lt;/option&gt;'
                  }
  
                }).length;
  
                //alert(cnt);
  
            }
            }).length;
              $('#model2').html("");
  
              var jSelect=$("select[name='model']");
                      jSelect.removeAttr('disabled');
             $('#model2').append(options1); 
  
            // $("#img2").attr('src',"");
            }     
  
  
  &lt;!--###########--&gt;
  
          function test4(val)
              {
                 document.getElementById("CatsearchButton").style.display="block";
  
              }
  
              function getCookie(c_name)
               {
  
                var i,x,y,ARRcookies=document.cookie.split(";");
  
                  for (i=0;i&lt;ARRcookies.length;i++)
                  {
                    x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
                    y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
                    x=x.replace(/^\s+|\s+$/g,"");
  
                    if (x==c_name)
                      {
                      return unescape(y);
                      }
  
                    }
  
              }
  
              function callRedir(valRed)
              {
               window.location.href=valRed;
  
              }
  
          function setCookie(c_name,value,exdays)
          {
          var exdate=new Date();
          exdate.setDate(exdate.getDate() + exdays);
          var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
          document.cookie=c_name + "=" + c_value;
          }
  
          function setHref()
              {
  
  
              appendStr=getCookie("append_string");
  
              if(appendStr==null)
              {
              appendStr=1;
              }
  
              $("ul li.nav a").each(function(index){
              var st=$(this).attr("href");
              if(st.substring(0,18)=="/SearchResults.asp")
              {
                strHref= $(this).attr("href");
                strhref=strHref.split("&amp;");
                if(appendStr==1)
                {
                strHref=strhref[0];
                }
                else
                {
                strHref=strhref[0]+appendStr;
                }
                $(this).attr("href",strHref);
              }
              });
  
              }
          setHref();  
  
      &lt;/script&gt;     
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>