3

我试图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>
4

6 回答 6

15

这是演示 - 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);
});

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

于 2013-09-12T14:26:58.693 回答
3

这应该这样做：

var action = $("#fruit option:selected").attr('data-id');
var type = $("#fruit option:selected").attr('data-name');
于 2013-09-12T14:22:22.390 回答
2

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

于 2014-07-21T09:42:24.873 回答
1

你也可以prop在 attr 的地方使用

道具文件

于 2013-09-12T14:25:44.727 回答
0

您可以像这样访问所选选项的属性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');

});
于 2013-09-12T14:23:16.693 回答
0

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

$('#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)          
});
于 2013-09-12T14:28:00.720 回答