How to get the value of the ul list on change with jQuery?
<p>I have this list:</p>

<pre><code>&lt;ul class="country-list hide"&gt;
    &lt;li class="country" data-dial-code="213" data-country-code="dz"&gt;&lt;div class="flag-box"&gt;&lt;div class="iti-flag dz"&gt;&lt;/div&gt;&lt;/div&gt;&lt;span class="country-name"&gt;Algeria (‫الجزائر‬‎)&lt;/span&gt;&lt;span class="dial-code"&gt;+213&lt;/span&gt;&lt;/li&gt;
    &lt;li class="country" data-dial-code="376" data-country-code="ad"&gt;&lt;div class="flag-box"&gt;&lt;div class="iti-flag ad"&gt;&lt;/div&gt;&lt;/div&gt;&lt;span class="country-name"&gt;Andorra&lt;/span&gt;&lt;span class="dial-code"&gt;+376&lt;/span&gt;&lt;/li&gt;
    &lt;li class="country" data-dial-code="244" data-country-code="ao"&gt;&lt;div class="flag-box"&gt;&lt;div class="iti-flag ao"&gt;&lt;/div&gt;&lt;/div&gt;&lt;span class="country-name"&gt;Angola&lt;/span&gt;&lt;span class="dial-code"&gt;+244&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>And I want to check which one is selected and get the data-country-code from it,
Any body have any idea on how to do it with jQuery?</p>