選擇選項：使用Ajax顯示所選值更改

Question

我試圖在使用Ajax選擇html文件時顯示數據。 我有一個足球聯賽的名單。選中時，我希望league.html的數據顯示在#league-display之內。

而且我還希望#league-display內默認顯示的第一個選項的值。請幫助..

<select name="league"> 
<option value="premiere-league">Premiere League</option> 
<option value="champions-league">Champions League</option> 
<option value="laliga">La Liga</option> 
<option value="bundesliga">Bundesliga</option> 
</select> 
<div id="league-display"></div> 

這裏是league.html內容

<div id="league-details"> 
<div id="premiere-league"> 
    Data of Premiere League 
</div> 
<div id="champions-league"> 
    Data of Champions League 
</div> 
<div id="laliga"> 
    Data of La Liga 
</div> 
<div id="bundesliga"> 
    Data of Bundesliga League 
</div> 
</div> 

Answer 1

寫change事件爲您select和使用$.load加載您html頁面的具體位置。考慮例如

<select name="league"> 
    <option value="premiere-league">Premiere League</option> 
    <option value="champions-league">Champions League</option> 
    <option value="laliga">La Liga</option> 
    <option value="bundesliga">Bundesliga</option> 
</select> 
<div id="league-display"></div> 

JS

$('select[name="league"]').on('change',function(){ 
    var url="league.html#"+this.value; //construct url and fetch only part of page 
    $("#league-display").load(url,function(){ 
     //Anything you want do after contents are loaded 
    }); 
}) 

在頁面加載下面，如果你想顯示當前選擇的數據然後再次使用相同load功能。爲了做得更好，你可以將你的加載內容移動到function之內並相應地調用該函數。

$(document).ready(function(){ 
    loadData(); //call the function 
}); 

$('select[name="league"]').on('change',loadData); //assign the function to the change event 

function loadData(){ 
    var url=$('select[name="league"] option:selected').val(); 
    $("#league-display").load(url,function(){ 
     //Anything you want do after contents are loaded 
    }); 
}