1

我正在编写一个简单的网页，它有两个带有年龄的下拉列表，说它们都包含从 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 会自动更改为下拉列表 1 中的值。

请帮忙。

这是我的 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>
4

2 回答 2

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>
于 2012-09-08T05:12:56.500 回答
0

这就是您如何选择比第一个大一个的第二个下降值。

现场演示

$("#selectfromage").change(function() {
    var fromage = $("#selectfromage").val();
    alert($("#selecttoage option").length);
    if (+fromage < $("#selecttoage option").length)
        $("#selecttoage").val(+fromage + 1);
    else 
        $("#selecttoage").val(fromage);
});​
于 2012-09-08T05:28:33.777 回答