Select Option: Display Selected Value On Change using Ajax
<p>I tried to display data from html file on select using Ajax. 
I having a list of football league . When selected, i want the data from <code>league.html</code> display this inside <code>#league-display</code>.</p>

<p>And also i want the value of the first option display by default inside <code>#league-display</code>. Please Help..</p>

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

<p>Here is the <code>league.html</code> content</p>

<pre><code>&lt;div id="league-details"&gt;
 &lt;div id="premiere-league"&gt;
   Data of Premiere League
 &lt;/div&gt;
 &lt;div id="champions-league"&gt;
   Data of Champions League
 &lt;/div&gt;
 &lt;div id="laliga"&gt;
   Data of La Liga
 &lt;/div&gt;
 &lt;div id="bundesliga"&gt;
   Data of Bundesliga League
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>