Question

我正在写一个简单的网页，其中有两个带有年龄的下拉列表，比如说它们都包含1到30的选项。我希望下拉列表2更改为用户选择的下拉列表1.例如，首先，两个下拉列表的值均为1-30，默认值均为1.用户从第一个下拉列表中选择12，我希望第二个下拉列表自动更改为13。

所以我想出了这个javascript片段，

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

但是这种行为有点奇怪，如果我从dropdown1中选择一个值，警报会触发，但.val不会。但是，如果我刷新页面，下拉列表2会自动更改为下拉列表中的值。

请帮忙。

这是我的php源代码中的片段

<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

仅在dom准备就绪时输入代码，

$(document).ready(function () {
 $("#selectfromage").change(function(){
   var fromage=$("#selectfromage").val();
   $("#selecttoage").val(fromage);
 });
});

或将代码放在您正在访问的元素下面，例如

<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>
<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>
<script>
    $("#selectfromage").change(function () {
        var fromage = $("#selectfromage").val();
        $("#selecttoage").val(fromage);
    });
</script>

Answer 2

这是您可以选择第二个丢弃值大于第一个丢弃值的方法。

<强> 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);
});

jquery $（“＃dropdown”）。val在.change时不会触发

2 个答案: