jquery：在下拉列表中获取自定义属性的值

Question

I have a simple JQuery code.

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

and i have html code.

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

When i run this program, it is giving undefined error in alert box. I need the value of langid as given in my option tage.

So what is the problem in my code. ?

Secondly what is the cause of undefined error in JQuery.

Thanks

Answer 1

Inside the change handler this refers to the select element, but the langid is in the selected option element. So you need to find the selected option and then call .attr("langid") on that element

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

Demo: Fiddle

Answer 2

try something like this

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

Answer 3

This script will work for you. See jsfiddle

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

Answer 4

try this:

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