Question

I am writing a simple webpage which has two dropdown list with ages, say both of them contains options from 1 to 30. I want dropdown 2 to change to the value user selected for dropdown 1. For example, in the first place, the two dropdowns are all having 1-30 as values and defaults are both 1. An user chooses 12 from the first dropdown, I want the second one to automatically change to 13.

So I figured this javascript snippet out,

    <script>
    $(document).ready(function(){
        $("#selectfromage").change(function(){
            var fromage=$("#selectfromage").val();
            $("#selecttoage").val(fromage);
            alert(fromage);
        });
    });
</script>

But the behavior is kinda weird, if I select a value from dropdown1, the alert fires but the .val does not. But if I refresh the page, dropdown 2 changes to the value in dropdown 1 automatically.

Please help.

Here is the snippet in my php source

<select name="fromage" id="selectfromage" data-inline="true" data-mini="true">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
        </select>
<script>
        $("#selectfromage").change(function(){
            var fromage=$("#selectfromage").val();
            $("#selecttoage").val(fromage);
        });
</script>
<select name="toage" id="selecttoage" data-inline="true" data-mini="true">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
        </select>

Answer 1

This is how you can select second drop value one greater then the first.

Live Demo

$("#selectfromage").change(function() {
    var fromage = $("#selectfromage").val();
    alert($("#selecttoage option").length);
    if (+fromage < $("#selecttoage option").length)
        $("#selecttoage").val(+fromage + 1);
    else 
        $("#selecttoage").val(fromage);
});​