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

但是，它返回的是不确定的。

Answer 1

返回undefined是因为函数内的this是指主要的#futsalSelect元素，而不是所选的选项。要获得所需的值，请执行以下操作：

 $("#futsalSelect").change(function() {

     timezone = this.options[this.selectedIndex].getAttribute("data-timezone");
     console.log(timezone);

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

Answer 2

使用option：selected选择器：

SyntaxError: invalid syntax

 $("#futsalSelect").change(function() {
     futsal_id = $("#futsalSelect option:selected" ).val();

     timezone = $("#futsalSelect option:selected" ).attr("data-timezone");
     console.log(timezone);  //undefined

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

Answer 3

您想读取选项的数据属性，而不是select的数据属性。可以做到：

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

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

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

Answer 4

您正试图从选择数据时区中获取值。您必须将其带入选择中的 option 选项。

希望有帮助。

无法使用jQuery检索数据属性

4 个答案: