1

年齢のある2つのドロップダウンリストがある単純なWebページを作成しています。どちらにも、1から30までのオプションが含まれています。ドロップダウン2を、ドロップダウン1に選択した値のユーザーに変更します。たとえば、最初に2つです。ドロップダウンの値はすべて1〜30で、デフォルトは両方とも1です。ユーザーが最初のドロップダウンから12を選択した場合、2番目のドロップダウンを自動的に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

これは、最初のドロップ値より1つ大きい2番目のドロップ値を選択する方法です。

ライブデモ

$("#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 に答える