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?

Lists normaly don't "change" and list items normally don't get "selected". You are probably using a framework that transforms an ul to a selection? If so, we need to know how to identify the "selected" item - if we know that, we can build a jquery selector. — Mike Scotty, Jun 14 '16 at 13:20
The only way i can fined is the selected `li` class changed to this `class="country highlight active"` — Mohammad AL-Raoosh, Jun 14 '16 at 13:23
Looks like a library that customizes select look and feel, which means there would be a hidden select element associated with the list. If you can find out the custom select used, then that should help find out the select and hence the value. — Arathi Sreekumar, Jun 14 '16 at 13:25
In that case you can use: `$("li.country.highlight.active").data('country-code');` to get what you're looking for. Or simply `$(".active").data('country-code');` if the class `active` isn't used anywhere else. — Mike Scotty, Jun 14 '16 at 13:25

score 0 · Answer 1 · answered Jun 14 '16 at 13:37

0

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

answered Jun 14 '16 at 13:37

Bharath Royal

19
4

There is no option element in the code posted. And why would you use `.attr("data-country-code").val()` instead of `.data('country-code')` assuming the OP had a working example? – j08691 Jun 14 '16 at 13:42
because `data-country-code` is an custom attribute he used. we cant access it like `.data('country-code')` if we use `.attr()` method he can get the particular value he need every time the select changes. – Bharath Royal Jun 15 '16 at 07:00
Why can't you access it with `.data('country-code')`? – j08691 Jun 15 '16 at 13:16
`.data('country-code')` is not a jQuery library defined method. You can find a error `undefined .data(..) is not a method` error in browser console. – Bharath Royal Jun 16 '16 at 13:33
Um, [`.data()`](https://api.jquery.com/data/) is absolutely a jQuery method and made for exactly this situation – j08691 Jun 16 '16 at 13:35
`data` is a prefix that is used to define a custom attribute as per user wish, which is introduced in HTML5 and you cannot access it as a jQuery or JavaScript method. – Bharath Royal Jun 16 '16 at 13:41
The method in jQuery you are referring to is used for other functionality. It is used to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks. – Bharath Royal Jun 16 '16 at 13:45

score 0 · Answer 2 · edited Jun 14 '16 at 14:08

0

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.

edited Jun 14 '16 at 14:08

j08691

204,283
31
260
272

answered Jun 14 '16 at 13:52

Gautam Kumar

48
1
6

score 0 · Answer 3 · edited May 23 '17 at 10:34

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

score -1 · Answer 4 · answered Jun 14 '16 at 13:27

-1

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

answered Jun 14 '16 at 13:27

Sudik Maharana

704
1
7
16

Instead of `html` the OP wants `.data(...)` (in case this .active stuff is correct) – Xatenev Jun 14 '16 at 13:29
But i wan't a way to detect when i change the selected li? – Mohammad AL-Raoosh Jun 14 '16 at 13:32
@MohammadAL-Raoosh You need to better explain your question. The code you posted is a list and has no change or selection ability. Please expand the question, add any tags that might be missing, and create a [mcve] showing us what you've tried. – j08691 Jun 14 '16 at 13:34

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

4 Answers4