Получить атрибуты данных 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); 
    }); 

// 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); 
}); 

демо 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

Вы можете получать доступ выбранного атрибута опциона 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 4

вы также можете использовать prop в месте на ATTR

prop documentation

Answer 5

Попробуйте сделать следующее в вашем код

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

Answer 6

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