javascript - 无法使用 jquery 检索数据属性

Question

我有一个选择选项下拉菜单，例如：

 <select name="futsalSelect" id="futsalSelect" class="form-control">
     <option data-timezone="MST" value="1" selected="">Sample futsal One</option>
     <option data-timezone="EST" value="3">Sample futsal Three</option>
 </select>

现在，我想data-timezone在更改该选择选项时检索该值。

所以，我尝试了：

 $("#futsalSelect").change(function() {
     futsal_id = $(this).val();

     timezone = $(this).attr("data-timezone");
     console.log(timezone);  //undefined

     $("#futsalTimezone").text(timezone);
 });

但是，它返回未定义。

标签： javascriptjquery

Answer 1

您想读取选项的数据属性，而不是选择。这将做到：

$('#futsalSelect').change(function() {         
     futsal_id = $(this).val();

     timezone = $(this).find('option:selected').data('timezone');
     console.log(timezone);  //undefined

     $('#futsalTimezone').text(timezone);
 });