title: Jquery filter dropdown based on another dropdown
body: <p>Im trying to filter a dropdown based on another dropdown.</p>
  
  <p>Im having the dropdown structure as below..</p>
  
  <p>*as soon as i select 8:00 in the first dropdown it should populate 8:30 in the next and followed by other items (should append).</p>
  
  <p>*And if the select 8:00 in the first DDL, the second DDL Should not show the items after 24:00 hrs.... (should have a provision to select only with in 24 hrs). </p>
  
  <pre><code>&lt;asp:DropDownList ID="ddlFrom" runat="server"&gt;
  &lt;asp:ListItem value="1"&gt;8:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="2"&gt;8:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="3"&gt;9:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="4"&gt;9:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="5"&gt;10:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="6"&gt;10:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="7"&gt;11:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="8"&gt;11:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="9"&gt;12:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="10"&gt;12:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="11"&gt;13:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="12"&gt;13:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="13"&gt;14:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="14"&gt;14:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="15"&gt;15:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="16"&gt;15:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="17"&gt;16:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="18"&gt;16:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="19"&gt;17:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="20"&gt;17:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="21"&gt;18:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="22"&gt;18:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="23"&gt;19:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="24"&gt;19:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="25"&gt;20:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="26"&gt;20:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="27"&gt;21:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="28"&gt;21:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="29"&gt;22:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="30"&gt;22:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="31"&gt;23:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="32"&gt;23:30&lt;/asp:ListItem&gt;       
  &lt;asp:ListItem value="34"&gt;00:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="35"&gt;1:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="36"&gt;1:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="37"&gt;2:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="38"&gt;2:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="39"&gt;3:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="40"&gt;3:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="41"&gt;4:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="42"&gt;4:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="43"&gt;5:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="44"&gt;5:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="45"&gt;6:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="46"&gt;6:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="47"&gt;7:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="48"&gt;7:30&lt;/asp:ListItem&gt;
   &lt;/asp:DropDownList&gt;
   To: &lt;asp:DropDownList ID="ddlTo" runat="server"&gt;
  &lt;asp:ListItem value="2"&gt;8:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="3"&gt;9:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="4"&gt;9:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="5"&gt;10:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="6"&gt;10:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="7"&gt;11:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="8"&gt;11:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="9"&gt;12:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="10"&gt;12:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="11"&gt;13:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="12"&gt;13:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="13"&gt;14:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="14"&gt;14:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="15"&gt;15:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="16"&gt;15:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="17"&gt;16:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="18"&gt;16:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="19"&gt;17:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="20"&gt;17:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="21"&gt;18:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="22"&gt;18:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="23"&gt;19:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="24"&gt;19:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="25"&gt;20:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="26"&gt;20:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="27"&gt;21:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="28"&gt;21:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="29"&gt;22:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="30"&gt;22:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="31"&gt;23:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="32"&gt;23:30&lt;/asp:ListItem&gt;   
  &lt;asp:ListItem value="34"&gt;00:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="35"&gt;1:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="36"&gt;1:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="37"&gt;2:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="38"&gt;2:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="39"&gt;3:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="40"&gt;3:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="41"&gt;4:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="42"&gt;4:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="43"&gt;5:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="44"&gt;5:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="45"&gt;6:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="46"&gt;6:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="47"&gt;7:00&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="48"&gt;7:30&lt;/asp:ListItem&gt;
  &lt;asp:ListItem value="1"&gt;8:00&lt;/asp:ListItem&gt;
  &lt;/asp:DropDownList&gt;
  </code></pre>
  
  <p>I tried with this following script:</p>
  
  <pre><code>&lt;script language="javascript"&gt;
  
  function changeDDL()
     {
          $(function () {
              $("#ctl00_m_g_72a94db4_26d6_4cd0_8ea9_dca70abb017b_ctl00_ddlFrom").change(function (e) {
                  $("#ctl00_m_g_72a94db4_26d6_4cd0_8ea9_dca70abb017b_ctl00_ddlTo").empty();
  
                  var options = 
                  $("#ctl00_m_g_72a94db4_26d6_4cd0_8ea9_dca70abb017b_ctl00_ddlFrom option").filter(function(e){
                      //return $(this).attr("value") &gt; $("#ctl00_m_g_72a94db4_26d6_4cd0_8ea9_dca70abb017b_ctl00_ddlFrom option:selected").val();
                      return parseInt($(this).attr("value"),10) &gt; parseInt($("#ctl00_m_g_72a94db4_26d6_4cd0_8ea9_dca70abb017b_ctl00_ddlFrom option:selected").val(),10);
  
                  }).clone();
  
                  $("#ctl00_m_g_72a94db4_26d6_4cd0_8ea9_dca70abb017b_ctl00_ddlTo").append(options);
              });
          });
          }
  &lt;/script&gt;
  </code></pre>
  
  <p>But not getting proper results...</p>