jquery：在下拉列表中獲取自定義屬性的值

Question

我有一個簡單的JQuery代碼。

$(document).ready(function() { 
  $( ".translanguage" ).change(function() {
      var value = $(this).attr("langid");
      alert(value);
  });
});

我有HTML代碼。

<select name="translanguage" class="translanguage">
  <option value="0">Please Select Language</option>
  <option class="transoption" value="1" langid="1">Urdu</option>
  <option class="transoption" value="2" langid="2">English</option>
  <option class="transoption" value="3" langid="3">Arabic</option>
  <option class="transoption" value="4" langid="4">Sindhi</option>
</select>

當我運行此程序時，它在警告框中給出未定義的錯誤。 我需要在我的選項tage中給出的langid的值。

那我的代碼有什么問題呢。 ？

其次，JQuery中未定義錯誤的原因是什么。

謝謝

Answer 1

在更改處理程序內部， this引用了select元素，但是langid位於選定的option元素中。 因此，您需要找到所選的option ，然后在該元素上調用.attr("langid")

jQuery(function () {
    $(".translanguage").change(function () {
        var value = $(this).find('option:selected').attr("langid");
        alert(value);
    });
})

演示： 小提琴

Answer 2

嘗試這樣的事情

      $( ".translanguage" ).change(function() {
          alert(this.options[this.selectedIndex].getAttribute('langid'));
      });

Answer 3

這個腳本適合你。 見jsfiddle

$(function () {
    $(".translanguage").change(function () {
        var value = $( "select option:selected" ).attr("langid");
        alert(value);
    });
})

Answer 4

嘗試這個：

// jquery wont find the attr of langid, change the langid to id in html.
$(document).ready(function() { 
  $( ".translanguage" ).change(function() {
    var value = $(this).attr("id");
    alert(value);
  });
});