CODEWITHSUNDEEP
jquery
Jam
Jam

Reputation: 75

jQuery Change the Dropdown values based on other dropdown

I am using following Jscript to show 24 hours format of time FromTime and ToTime

Almost it is working fine, but have some issues as it is not appending all the values from first dropdown and some times for some value i select in first dropdown the sort order or the immd time is not on the top

Please help me on this.

Thanks in advance.

<select id="one">
     <option value="1">1:00</option>
    <option value="2">1:30</option>
    <option value="3">2:00</option>
    <option value="4">2:30</option>
    <option value="5">3:00</option>
    <option value="6">3:30</option>
    <option value="7">4:00</option>
    <option value="8">4:30</option>
    <option value="9">5:00</option>
    <option value="10">5:30</option>
    <option value="11">6:00</option>
    <option value="12">6:30</option>
    <option value="13">7:00</option>
    <option value="14">7:30</option>
    <option value="15">8:00</option>
    <option value="16">8:30</option>
    <option value="17">9:00</option>
    <option value="18">9:30</option>
    <option value="19">10:00</option>
    <option value="20">10:30</option>
    <option value="21">11:00</option>
    <option value="22">11:30</option>
    <option value="23">12:00</option>
    <option value="24">12:30</option>
    <option value="25">13:00</option>
    <option value="26">13:30</option>
    <option value="27">14:00</option>
    <option value="28">14:30</option>
    <option value="29">15:00</option>
    <option value="30">15:30</option>
    <option value="31">16:00</option>
    <option value="32">16:30</option>
    <option value="33">17:00</option>
    <option value="34">17:30</option>
    <option value="35">18:00</option>
    <option value="36">18:30</option>
    <option value="37">19:00</option>
    <option value="38">19:30</option>
    <option value="39">20:00</option>
    <option value="40">20:30</option>
    <option value="41">21:00</option>
    <option value="42">21:30</option>
    <option value="43">22:00</option>
    <option value="44">22:30</option>
    <option value="45">23:00</option>
    <option value="46">23:30</option>
    <option value="47">00:00</option>
    <option value="48">00:30</option>

  </select>

    <select id="two"></select>

    <script type="text/javascript">
        $(function () {
            $("#one").change(function (e) {
                $("#two").empty();

                var options = 
                $("#one option").filter(function(e){
                    return $(this).attr("value") > $("#one option:selected").val();
                }).clone();

                $("#two").append(options);
            });
        });
    </script>

Upvotes: 1

Views: 1283

Answers (1)

James Montagne
James Montagne

Reputation: 78630

Your numbers are being compared as strings, simply parse them to int and then compare:

return parseInt($(this).attr("value"),10) > parseInt($("#one option:selected").val(),10);

http://jsfiddle.net/XMq2T/1/

Upvotes: 1

Related Questions