jquery - フォームの select のオプションの値から jquery データ属性を取得する

Question

data以下のフォームからの値を取得しようとしているoptionsので、jQuery で使用できますが、どういうわけか成功していないようです。私がやろうとしていることは単純で、以下のコードでわかります。どうすればこのようなことができますか？

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

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

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

//Jクエリ

<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

これはそれを行う必要があります：

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

Answer 2

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

Answer 3

コードで次のことを試してください

$('#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)          
});