从表单的选择选项的值中获取 jquery 数据属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18766827/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get jquery data attributes from a form's select's option's values
提问by Norman
I'm trying to get the values of datafrom the optionsin the form below, so I can use them in jQuery, but I somehow don't seem to be succeeding. What I'm trying to do is simple, and you'll see in my code below. How can I do something like this?
我试图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>
回答by Elen
here is demo - http://jsfiddle.net/tnVfV/
这是演示 - http://jsfiddle.net/tnVfV/
here is code:
这是代码：
$('#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-idand data-nameare attributes of options. There are native attributes idand nameyou could use...
data-id和data-name是选项的属性。有本机属性id，name您可以使用...
ok as per tymeJV comment here is code using data():
好的，根据 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);
});
回答by Sarcastic
This should do it:
这应该这样做：
var action = $("#fruit option:selected").attr('data-id');
var type = $("#fruit option:selected").attr('data-name');
回答by Shan
var id = $('#fruit').find(':selected').data('id');
var name = $('#fruit').find(':selected').data('name');
var id = $('#fruit').find(':selected').data('id');
var name = $('#fruit').find(':selected').data('name');
回答by S. S. Rawat
回答by Alex
You can access selected option's attribute data-namelike this:
您可以data-name像这样访问所选选项的属性：
$('#fruit option:selected').attr('data-name');
So try this
所以试试这个
$('#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');
});
回答by Akshay Khandelwal
Try doing the following in your code
尝试在您的代码中执行以下操作
$('#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)
});
