0

私は2つの選択リストの次のコードを持っています.2番目のものは最初のものの選択に応じて情報を表示しています:

<head>
<script type="text/javascript" src="include-js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="include-js/functions.js"></script>
</head>
<body>
    <table border='1'>
        <tr>
            <td>
                <select class="standing_countries" name="standing_countries">
                    <option class="country_element" id='1'>Ingiltere</option>
                    <option class="country_element" id='2'>Türkiye</option>
                    <option class="country_element" id='3'>Almanya</option>
                    <option class="country_element" id='4'>Ispanya</option>
                    <option class="country_element" id='5'>Italya</option>
                    <option class="country_element" id='6'>Fransa</option>
                </select>
            </td>
            <td class='leagues' id='leagues'>
                <select class='standing_leagues' name='standing_leagues'>";
                    <option class='league_element' id='1204'>Premier League</option>
                    <option class='league_element' id='1205'>Şampiyona</option>
                    <option class='league_element' id='1206'>League One</option>
                    <option class='league_element' id='1197'>League Two</option>
                </select>
            </td>
        </tr>
        <tr>
            <td colspan='2'>
            </td>
        </tr>
    </table>
</body>
</html>

functions.js:

$(document).ready(function(){
    $('.standing_countries').on('change',function(){
        var select_id = $(this).children(":selected").attr("id");
        if(select_id == 1)
        {
            var txt="<select class='standing_leagues' name='standing_leagues'>";
                txt=txt +"<option class='league_element' id='1204'>Premier League</option>";
                txt=txt +"<option class='league_element' id='1205'>Şampiyona</option>";
                txt=txt +"<option class='league_element' id='1206'>League One</option>";
                txt=txt +"<option class='league_element' id='1197'>League Two</option>";
                txt=txt +"</select>";
            $('.leagues').html(txt);
        }
        else if(select_id == 2)
        {
            var txt="<select class='standing_leagues' name='standing_leagues'>";
                txt=txt +"<option class='league_element' id='1425'>Spor Toto Süper Lig</option>";
                txt=txt +"<option class='league_element' id='1422'>Ptt 1.Lig</option>";
                txt=txt +"<option class='league_element' id='1421'>Spor Toto Tff 2.Lig</option>";
                txt=txt +"</select>";
            $('.leagues').html(txt);
        }
        else if(select_id == 3)
        {
            var txt="<select class='standing_leagues' name='standing_leagues'>";
                txt=txt +"<option class='league_element' id='1229'>Bundesliga</option>";
                txt=txt +"<option class='league_element' id='1225'>2.Bundesliga</option>";
                txt=txt +"<option class='league_element' id='1230'>3.Liga</option>";
                txt=txt +"</select>";
            $('.leagues').html(txt);
        }
        else if(select_id == 4)
        {
            var txt="<select class='standing_leagues' name='standing_leagues'>";
                txt=txt +"<option class='league_element' id='1399'>Primera Division</option>";
                txt=txt +"<option class='league_element' id='1398'>Segunda Division</option>";
                txt=txt +"</select>";
            $('.leagues').html(txt);
        }
        else if(select_id == 5)
        {
            var txt="<select class='standing_leagues' name='standing_leagues'>";
                txt=txt +"<option class='league_element' id='1269'>Serie A</option>";
                txt=txt +"<option class='league_element' id='1265'>Serie B</option>";
                txt=txt +"</select>";
            $('.leagues').html(txt);
        }
        else if(select_id == 6)
        {
            var txt="<select class='standing_leagues' name='standing_leagues'>";
                txt=txt +"<option class='league_element' id='1221'>League 1</option>";
                txt=txt +"<option class='league_element' id='1217'>League 2</option>";
                txt=txt +"</select>";
            $('.leagues').html(txt);
        }
    });
});

$(document).ready(function(){
    $('.standing_leagues').on('change',function(){
        var standing_id = $(this).children(":selected").attr("id");
        alert(standing_id);
    });
});

2番目のリストオプションが選択されたときに警告するjQueryコードをいくつか書きましたが、最初のリスト（デフォルトリスト）でのみ機能しましたが、最初のリストからオプションを選択し、情報が2番目のリストに読み込まれると、選択しようとします2 番目のリストのオプションですが、アラートはトリガーされません。

誰でも私を助けることができますか？リストを使った jQuery は初めてですが、何が起こっているのですか?

4

2 に答える 2

0

これは、国を変更するたびに選択ボックスを作成しているためです。

選択ボックスを作成した後、イベントをバインドする必要があります。

于 2013-06-03T06:49:03.427 に答える
0

htmlを変更してイベントが機能しないため、このように毎回イベントリスナーを追加する必要があります

function bindEvent(){
   $('.standing_leagues').on('change',function(){
       var standing_id = $(this).children(":selected").attr("id");
       alert(standing_id);
   });
}

デモを見る

.leaguesクラスのhtmlを変更するたびにその関数を呼び出します

于 2013-06-03T06:37:26.620 に答える