jquery - 从表单中获取 jquery 数据属性选择选项值

Question

我正在尝试从下面表单中的 options 获取 data 的值，这样我就可以在 jQuery 中使用它们，但我似乎不知道取得成功。我想做的很简单，您将在下面的代码中看到。我怎样才能做这样的事情？

$('#selectForm').click(function(e) {
        e.preventDefault();

        var action = $(this).data('id');
        var type = $(this).data('name');

        console.log(action+' '+type);
    });

//Jquery

<form id="selecttest">
    <label for="fruit">Please select at least two fruits</label><br>
        <select id="fruit" name="fruit" size="5">
            <option data-id="1" data-name="norman">Banana</option>
            <option data-id="2" data-name="james">Apple</option>
            <option data-id="3" data-name="lars">Peach</option>
            <option data-id="4" data-name="john">Turtle</option>
        </select>
        <input type="submit" id="selectForm" value="Validate Selecttests">
    </form>

Answer 1

这里是演示 - http://jsfiddle.net/tnVfV/

这里是代码:

$('#selectForm').click(function (e) {
    e.preventDefault();

    var action = $('#fruit option:selected').attr('data-id');
    var type = $('#fruit option:selected').attr('data-name');

    console.log(action + ' ' + type);
});

data-id 和 data-name 是选项的属性。您可以使用 native 属性 id 和 name...

<小时/>

根据 tymeJV 注释，这里是使用 data() 的代码:

$('#selectForm').click(function (e) {
    e.preventDefault();

    var action = $('#fruit option:selected').data('id');
    var type = $('#fruit option:selected').data('name');

    console.log(action + ' ' + type);
});

演示 http://jsfiddle.net/tnVfV/1/