如何通过单击按钮获取 UL / LI 框的选定 ID - Jquery答案

【问题标题】：How to get the selected ID of a UL / LI Box by Clicking on a Button - Jquery如何通过单击按钮获取 UL / LI 框的选定 ID - Jquery
【发布时间】：2014-01-27 17:10:52
【问题描述】：

我正在尝试通过单击按钮获取由 li 组成的列表框的值。我在网上搜索，但大多数解决方案是使用列表框本身的 onClick 按钮。我尝试过这样的事情。

列表框：

echo("</head><body><ul id='selectable'>");

while($satz != null)
{
  echo "<li class='ui-widget-content' id='userid' value='$satz[ID]'>$satz[username]</li>";
  $satz=mysql_fetch_assoc($cursor);
}
echo("</ul></body></html>");

JQuery:

$(document).ready(function()
{
$("#del").click(function()
{
var id = document.getElementById('selectable li').value;
alert(id);

但是ID未定义，怎么办？谢谢。

【问题讨论】：

ul 元素没有 value 属性。另请注意，ID 必须是唯一的。
代替od值使用数据值
ID 是唯一的，因为我是从数据库中获取的。列表框包含用户、ID 和用户名。如何获取li的选中ID？
“ID 是唯一的，因为我是从数据库中获取的。” 我的意思是 ID 属性，而不是 value 属性的值，#del 元素在哪里?
哦，好的。 #del 按钮与 JQuery 函数和列表框位于同一页面上。但是列表框的功能在另一个页面上，我用included_once包含了页面。你的意思是li标签的ID吗？他们有相同的名为“用户ID”的ID是不是错了

标签： javascript jquery html listbox

【解决方案1】：

ul 元素不像select 元素那样工作，即它没有选定的选项（值）。这就是为什么其他解决方案建议监听li 元素的点击事件。您应该使用 select 元素而不是 ul 元素：

$("#del").click(function() {
   var id = $('#selectable').val();
});

或者向目标li元素添加一个标识符，比如特定的className：

$("#del").click(function() {
   var id = $('#selectable li.selected').attr('value');
});

话虽如此，请注意您的标记无效，因为：

您对多个元素使用相同的 ID，ID 应该是唯一的。这里应该使用类。
value 不是 li 元素的有效属性，您应该改用 data-* 属性。然后您可以使用 jQuery .data() 方法读取值。假设你有一个data-value 属性用于读取值，你可以编码：$('#selectable li.selected').data('value')。
您正在生成body 元素及其内容，还包括另一个页面。

【讨论】：

@Preprocezzor 欢迎您。有许多插件可让您自定义所选元素的外观，例如 chosen 和 dropkick.，只需 google custom select。
感谢您的建议。实际上，我已经有了一个带有选择和选项元素的版本。我用 ul 和 li 尝试过，以便更轻松地设计它。你有什么建议让它与 li 元素一起使用吗？我将我的 css 类添加到选项值中，但它看起来不像我的 li 元素具有相同的 css 类。您对设计带有选项元素的选择列表框有什么建议吗？
@Preprocezzor 我的第一条评论提出了一些选择。还有一些关于 SO 的相关问题，例如What are your recommendations on a jQuery custom select element plugin?。
谢谢，我会尝试使用这些。