Question

我正在尝试从下面的表单中的data获取options的值，所以我可以在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是选项的属性。您可以使用原生属性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);
});

demo http://jsfiddle.net/tnVfV/1/

Answer 2

这应该这样做：

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

Answer 3

var id = $('#fruit').find(':selected').data('id'); var name = $('#fruit').find(':selected').data('name');

Answer 4

你也可以在attr

的地方使用prop

prop documentation

Answer 5

您可以像这样访问所选选项的属性data-name：

$('#fruit option:selected').attr('data-name');

所以试试这个

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

    // better add this part of code for cross-browser functionality:
    var event = (window.event || e); 

    event.preventDefault();

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

});

Answer 6

尝试在代码中执行以下操作

$('#selectForm').click(function(e) {
    e.preventDefault();
    var select = $("#fruit")[0].selectedIndex;
    var id= $("#fruit option:eq("+select+")").data("id");
    var type=$("#fruit option:eq("+select+")").data("name");
    console.log(id +" "+ type)          
});

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

6 个答案: