Question

以下代码返回'undefined'...

$('select').change(function(){
    alert($(this).data('id'));
});

<select>
    <option data-id="1">one</option>
    <option data-id="2">two</option>
    <option data-id="3">three</option>
</select>

Answer 1

您需要找到所选的选项：

$(this).find(':selected').data('id')

或

$(this).find(':selected').attr('data-id')

虽然第一种方法是首选。

Answer 2

尝试以下方法：

$('select').change(function(){
  alert($(this).children('option:selected').data('id'));
});

您的更改订阅者订阅了select的更改事件，因此this参数是select元素。您需要找到所选的子项以从中获取数据ID。

Answer 3

document.querySelector('select').onchange = function(){   
   alert(this.selectedOptions[0].getAttribute('data-attr')); 
};

Answer 4

Vanilla Javascript：

this.querySelector(':checked').getAttribute('data-id')

Answer 5

您可以context或this使用$(this)语法。这与find()的效果相同。

＆＃13;

$('select').change(function(){
    console.log('Clicked option value => ' + $(this).val());
    console.log(':select & $(this) => ' + $(':selected', this).data('id'));
    console.log(':select & this => ' + $(':selected', this).data('id'));
    console.log('option:select & this => ' + $('option:selected', this).data('id'));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
    <option data-id="1">one</option>
    <option data-id="2">two</option>
    <option data-id="3">three</option>
</select>

＆＃13;

作为微观优化的问题，您可以选择find()。如果您更像是一名代码高尔夫球手，那么上下文语法就更简洁了。它归结为编码风格。

这是a relevant performance comparison。

Answer 6

这对我有用

<select class="form-control" id="foo">
    <option value="first" data-id="1">first</option>
    <option value="second" data-id="2">second</option>
</select>

和脚本

$('#foo').on("change",function(){
    var dataid = $("#foo option:selected").attr('data-id');
    alert(dataid)
});

Answer 7

$('#foo option:selected').data('id');

Answer 8

使用此方法，您可以获取文本，值和数据属性。

def color_gen():
co=(round(random.random()*250),round(random.random()*250),round(random.random()*250))
return co

TOOLS="pan,wheel_zoom,reset,poly_select,box_select"


p = figure(plot_width=900, plot_height=900, 
                        x_axis_type='auto',y_axis_type='auto',
                          title='Concentration')

i=1 #Particale ID
c=1 #Days
while i<=imax:
    co=color_gen()
    # print(co)
    while c<=cmax:
        cxname="deltax"+str(c)
        xsumname="XSum"+str(c)
        p.circle(data[xsumname], c, legend_label='Partical {}'.format(c), size=2, color=co)
        c=c+1
    i=i+1

p.legend.click_policy="hide"
p.legend.location = "top_left"

p.xaxis.axis_label = 'Z (m)'
p.yaxis.axis_label = 'C0 (kg/cu.m)'



# show the results
show(p)

在选择更改时，获取数据属性值

8 个答案: