jquery $("#dropdown").val 在 .change 时不会触发答案

【问题标题】：jquery $("#dropdown").val does not fire when .changejquery $("#dropdown").val 在 .change 时不会触发
【发布时间】：2012-09-08 05:08:15
【问题描述】：

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

所以我想出了这个javascript sn-p，

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

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

请帮忙。

这是我的php源码中的sn-p

<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>

【问题讨论】：

检查这个jsfiddle.net/mPCfd我认为它有效。
是的，它可以在小提琴中使用。我认为它在我的代码中不起作用的原因可能是因为我使用的是 Symfony2 + twig，并且我将 javascript 放在了 twig .html.twig 中。相同的代码不起作用...

标签： jquery drop-down-menu onchange

【解决方案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>

【讨论】：

【解决方案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 Mobile 框架，这有关系吗？非常感谢您的回复。