Question

比如说我有

<select>
    <option id="4" data-name="tomato" data-length="six">Tomato</option>
    <option id="5" data-name="onion" data-length="five">Onion</option>
</select>

我试图稍后调用一些javascript代码来获取不同变量的数据名称和长度：

var str = "name=" + jQuery("#data-name").val() + "&length=" + jQuery("#data-length").val();

我如何对来自同一元素的多个属性执行此操作？

Answer 1

尝试.....

 var select= $("select option:selected");
 var str = "name=" + $(select).attr('data-name') + "&length=" + $(select).attr('data-length');

Answer 2

您可以使用data()函数访问jQuery data - 属性：

var $opt = $("select option:selected");
var str = "name=" + $opt.data("name") + "&length=" + $data("length");

或者简单地将它们视为属性：

var $opt = $("select option:selected");
var str = "name=" + $opt.attr("data-name") + "&length=" + $opt.attr("data-length");

这个问题可以帮助您理解这两种方法之间的差异：jQuery Data vs Attr?。

Answer 3

检查这个小提琴：here

在jquery中，使用$（）。data（''）来获取元素的数据属性

<强> jquery的

$(document).ready(function() {
  alert($("#4").data('name') + " || " + $("#4").data('length'));
});

Answer 4

您可以使用 .data() ：

获取值

var str = "name=" + jQuery("#1").data("name") + "&length=" + jQuery("#1").data("length");

Answer 5

如果您不想使用jQuery，至少有两种方法：

如果您需要之前的新变量，用户使用您的选择控件提交表单，您可以将“onchange”附加到<select>标记以触发Javascript函数您创建以将用户选择的值分配给JS变量。

如果之后需要新变量，则用户提交包含您选择控件的表单，然后在表单发送给用户的页面上（它可以是同一页面表单已打开，您可以使用PHP来捕获提交的值并将您的Javascript变量写入页面的标题区域。

如果允许从单个控件中进行多项选择，请注意用户选择的值作为数组返回。

希望这有帮助！

Answer 6

使用data()方法访问数据属性值，示例

jQuery(document).ready(function($){
  $('select option').each(function(){
    alert('name='+ $(this).data('name') +  '&length=' + $(this).data('length') );
  });

});

https://jsfiddle.net/fem243o3/3/

如何从一个选定元素中提取多个属性？

6 个答案: