0

我有两个选择列表的以下代码，第二个显示信息取决于第一个的选择：

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

函数.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);
    });
});

我编写了一些 jQuery 代码来提醒选择第二个列表选项并且它仅适用于第一个（默认列表），但是当我从第一个列表中选择一个选项并将信息加载到第二个列表时，我尝试选择第二个列表中的一个选项，但不会触发警报。

有谁能够帮我？我是 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 回答