选择选项：使用Ajax显示所选值更改

问题描述：

我试图在使用Ajax选择html文件时显示数据。我有一个足球联赛的名单。选中时，我希望league.html的数据显示在#league-display之内。选择选项：使用Ajax显示所选值更改

而且我还希望#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>

你想div数据显示为选项？ – guradio

我希望在选择时在＃league-display中显示div数据 – user81244

答

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

$('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 
    }); 
}

选择选项：使用Ajax显示所选值更改

相关推荐