How to get the value of the ul list on change with jQuery?

Question

I have this list:

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

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?

Answer 1

Selected elements have two values to access.

One is "Val" and one is 'Text"

to get Value: $('ul.country-list').val();

to get Text: $('ul.country-list').text();

You can try with this

$("ul.country-list option:selected").attr("data-country-code").val();

Answer 2

I think there is some confusion related to "change" and ":selected" word. These work with select Tag. But. for your query answer is this with jQuery:

<script>
$(document).ready(function(){
  $('.country-list li').click(function(){
    var dataVal = $(this).data('dial-code');
    alert(dataVal);
   });
});
</script>

Hope, you have got the answer.

Answer 3

As Others comment that their is no options to select so we need to do this by add class on current click list element and I have update some html code in your then its work.

Html:

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

why i change data-attr position to span

Jquery:

$('ul.country-list li').on('click',function(){

$('ul.country-list>li').removeClass('active');

var dailCode = $(this).addClass('active').find('[data-dial-code]').attr('data-dial-code');

var dataCountryCode = $(this).find('[data-country-code]').attr('data-country-code');

alert(dailCode+' Country Code '+dataCountryCode);
});

Some Css:

ul.country-list>li {
  cursor:pointer;
}

ul.country-list li.active span {
 color: red;
}

And Here is JS Fiddle

Answer 4

When you click on any li that time you just need to add a class like "active" and remove active class from other li's if any. By this you can get the value of selected li.

$('.active .country-name').html();

and

$('.active .dial-code').html();