title: How to change drop-down value dynamically
body: <p>I need you help as I am not good in jQuery. I have bellow code and want to do some changes.</p>
  
  <p>If user Select <strong>One/Two(drop-down one)</strong> and <strong>HDB(drop-down second)</strong> then i want change this <strong>Boat Quay, Chinatown</strong> To <strong>Admiralty, Alexandra Road</strong> in third drop-down. One more thing that i want to set <strong>One(drop-down one)</strong> by default every time.</p>
  
  <p>My code reference link: <a href="http://www.roblaplaca.com/docs/custom-selectbox/" rel="nofollow">roblaplaca</a></p>
  
  <p>I will thankful If anyone can help me :) </p>
  
  <pre><code>    &lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Custom Styled Selectbox&lt;/title&gt;
  &lt;link rel="stylesheet" href="http://www.roblaplaca.com/docs/custom-selectbox/css/customSelectBox.css" /&gt;
  &lt;/head&gt;
  &lt;body class="noJS"&gt;
  &lt;script type="text/javascript"&gt; 
  try{Typekit.load();}catch(e){}
      var bodyTag = document.getElementsByTagName("body")[0];
      bodyTag.className = bodyTag.className.replace("noJS", "hasJS");
  &lt;/script&gt;
  &lt;div class="grid-system clearfix"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col span-9"&gt;
        &lt;div class="example clearfix"&gt;
          &lt;select class="custom interactive" id="properties"&gt;
            &lt;option value="selectone"&gt;Select a Type&lt;/option&gt;
            &lt;option value="rfs"&gt;One&lt;/option&gt;
            &lt;option value="rfr"&gt;Two&lt;/option&gt;
            &lt;option value="cfs"&gt;Three&lt;/option&gt;
            &lt;option value="cfr"&gt;Four&lt;/option&gt;
          &lt;/select&gt;
  
          &lt;select class="custom interactive" id="TypeList"&gt;
            &lt;option&gt;One&lt;/option&gt;
            &lt;option&gt;Two&lt;/option&gt;
            &lt;option&gt;Three&lt;/option&gt;
            &lt;option&gt;Four&lt;/option&gt;
          &lt;/select&gt; 
  
          &lt;select class="custom"&gt;
            &lt;option value=""&gt;Any&lt;/option&gt;
            &lt;option value=""&gt;Boat Quay&lt;/option&gt;
            &lt;option value=""&gt;Chinatown&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"&gt;&lt;/script&gt; 
  &lt;script src="http://github.com/vitch/jScrollPane/raw/master/script/jquery.jscrollpane.js"&gt;&lt;/script&gt; 
  &lt;script src="http://www.roblaplaca.com/docs/custom-selectbox/js/SelectBox.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript"&gt; 
  $(function() {
      window.prettyPrint &amp;&amp; prettyPrint()
      /*
          This is how initialization normally looks. 
          Typically it's just $("select.custom"), but to make this example more clear 
          I'm breaking from the pattern and excluding interactive
      */
      $("select.custom").not(".interactive").each(function() {
          var sb = new SelectBox({
              selectbox: $(this),
              height: 150,
              width: 200
          });
      });
  
      /*
          Adding some extra functionality for "interactive" selects
      */
      var TypeList = {
          selectone: ["Select a Type"],
          rfs: ["Any", "Landed", "Condominium", "HDB", "Others"],
          rfr: ["Any", "Landed", "Condominium", "HDB", "Others"],
          cfs: ["Any", "Industrial", "Retail", "Land", "Office", "Others"],
          cfr: ["Any", "Industrial", "Retail", "Land", "Office", "Others"]
          }
  
      var defaultSelectboxSettings = {
          height: 150,
          width: 150
      };
  
      var country_SB = null,
      city_SB = null;
  
      $("select.interactive").each(function() {
          if ($(this).attr("id") == "properties") {
              country_SB = new SelectBox($.extend(defaultSelectboxSettings, {
                  selectbox: $(this),
                  changeCallback: function(val) {
                      if (TypeList[val]) {
                          city_SB.enable();
                          updateCities(val);
                      }
                      if (val == "selectone") {
                          city_SB.disable();
                      }
                  }
              }));
          } else if ($(this).attr("id") === "TypeList") {
              city_SB = new SelectBox($.extend(defaultSelectboxSettings, {
                  selectbox: $(this)
                  }));
          }
      });
  
      updateCities($("#properties").val());
  
      if ($("#properties").val() == "selectone") {
         //city_SB.disable();
      }
  
      function updateCities(val) {
          var $select = $("select#TypeList"),
          html = "";
  
          for (var i = 0; i &lt; TypeList[val].length; i++) {
              html += '&lt;option&gt;' + TypeList[val][i] + '&lt;/option&gt;';
          }
          $select.html(html);
  
          // HACK: chrome is too fast?
          setTimeout(function() {
              city_SB.sync();
          }, 1);
      }
  
  });         
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>