title: How to get the value of the ul list on change with jQuery?
body: <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>