Question

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

<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);
    });
});

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

任何人都可以帮助我吗？我是jQuery的新手，列表是怎么回事？

Answer 1

因为使用更改html所以事件不起作用你需要每次都像这样添加事件监听器

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

See Demo

每次更改.leagues类

的html时调用该函数

Answer 2

这是因为您每次更改国家/地区时都会创建选择框。

您需要在创建选择框后绑定事件。

嵌套选择列表和加载信息

2 个答案: