如何在jQuery更改时获得ul列表的值？

Question

我有这个清单：

<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>

我想检查选择了哪一个，并从中获取数据国家代码。有人对如何使用jQuery有任何想法吗？

Answer 1

所选元素有两个值可访问。

一个是“ Val”，一个是“ Text”

获取值： $('ul.country-list').val();

获取文本： $('ul.country-list').text();

你可以尝试一下

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

Answer 2

我认为“更改”和“：已选择”一词有些混淆。 这些与选择标签一起使用。 但。 为您的查询答案是jQuery的：

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

希望，你得到了答案。

Answer 3

由于其他人评论说他们是没有选择的选择，因此我们需要通过在当前点击列表元素上添加类来完成此操作，并且我已经在您的工作中更新了一些html代码。

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>

为什么我将数据属性位置更改为跨度

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

一些CSS：

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

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

这是JS Fiddle

Answer 4

那个时候单击任何一个li时，您只需要添加一个类似“ active”的类，并从其他li的活动类（如果有）中删除active类。 通过这种方式，您可以获得所选li的值。

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

和

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