JQuery 从中<li>获取值

Question

试图从 JQuery 单击事件中的<li>中获取值。我使用无序列表作为选择表来代替真正的下拉列表。

.HTML：

<ul id="dropdown">
 <li value="1">user name</li>
 <li value="2">user age</li>
 <li value="3">user height</li>
</ul>

.JS：

$('#contactdiv1 #dropdown li').click(function(e) {
      var selection = $(this).text(); //this alerts name
      var selection = $(this).value(); // this fails object undefined
      var selection = $(this).find("value").text(); // this is blank
      alert(selection);
     //populateTableRow($('#customer-title'), data, selection);
});

Answer 1

首先，您不应该在属性上使用value <ul>它只保留给<ol> 。

您可以使用$("selector").attr("attribute")来获取元素中存在的任何属性的值。

如注释中所述，您应该对所有非纯 HTML 的内容使用 data-* 属性。

Answer 2

使用 .attr 值获取属性适用于表单/输入元素，它不是 li 的有效属性

$('#dropdown li').click(function(e) {
     alert($(this).attr("value"))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="dropdown">
 <li value="1">user name</li>
 <li value="2">user age</li>
 <li value="3">user height</li>
</ul>