如何在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();