嵌套選擇列表和負載信息

我有兩個選擇列表，第二個是示出根據第一一個的選擇信息的以下代碼：嵌套選擇列表和負載信息

<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與列表，發生了什麼？

來源

2013-06-03 unique_programmer

你能分享小提琴嗎？ – Janak

即使在現代瀏覽器中應該沒有問題，最好用一個不是數字的字母開始一個ID。 –

那麼這是因爲您每次更改國家時都會創建選擇框。

您需要在創建選擇框後綁定事件。

來源

2013-06-03 06:49:03

其因使用更改HTML這樣的事件不能工作，你需要每次添加事件偵聽器，這樣

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

See Demo

調用每一次工作，你改變

.leagues類的HTML

來源

2013-06-03 06:37:26 Dineshkani

嵌套選擇列表和負載信息

回答

相關問題