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

我认为有一些与“改变”和“：选择”字相关的混淆。这些与select标签一起使用。但。对于您的查询答案是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>

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

一些Css：

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

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

这是JS Fiddle

Answer 4

当你点击任何时候你只需要添加一个类似“活动”的类，并从其他li中删除活动类（如果有的话）。通过这个你可以得到选定的li的值。

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

和

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

如何使用jQuery获取ul列表的值？

4 个答案: