選択オプション：選択した値を表示するAjaxを使用して変更する

Question

Ajaxを使用したselectで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

があなたのselectためchangeイベントを書き、あなたのhtmlページの特定の場所をロードするために$.load使用しています。あなたは再び現在選択されているデータを表示し、同じload機能を利用したい場合は、ページの読み込みで例

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

の下に考えてみましょう。より良いものになるためには、ロードするものを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 
    }); 
}