Jquery filter dropdown based on another dropdown
<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>
