如何从使用<ul>创建的下拉列表中获取值& lt; li>标签

How to capture the value from a drop down list created using <ul> <li> tags

本文关键字：获取 下拉列表 lt 标签 li 创建 ul      更新时间：2023-09-26

我有一个下拉列表，其中有国家名称及其国旗图像。由于我们不能使用<select> <option>标签创建这样的列表，所以我使用<ul> <li>创建了它。现在我想捕获用户选择的值，并将其用于其他目的。我该怎么做呢?

列表是这样创建的:

<form id="formId" action="" method="post" class="loginForm">
  <fieldset id="localeSelect">
   <div>
     <div  id="localeIndicator">
      <a href="#" title="Select a country">
       <span class="united-kingdom"></span>UK &ndash; English
      </a>
    </div>
    <ul class="no-bullets block-list" role="tablist">
     <li><a href="#"><span class="austria"></span>Austria</a></li>
    </ul>
   </div>
</fieldset>
<fieldset>
 <input type="hidden" name="locale" />
 <input type="submit" value="Continue" />
</fieldset>

您可以这样做。看一看小提琴

小提琴联系

它会给你一个想法。

$("#submit").click(function() {
    alert("The selected Value is "+ $("ul").find(".selected").data("value"));
});

这可能是一个有点hack的解决方案，但使用data-*属性给每个项目一个唯一的值(不总是最好的选择，但肯定是最常用的，如果你问我的话)。

<div id="my-div">
    <ul>
        <li data-src="info to get here">something</li>
    </ul>
</div>

和jQuery

$(document).ready(function() {
    $("#my-div li").click(function() {
        var data = $(this).attr("data-src");
    });
});

你可以设置li的样式为:cursor: pointer;当你把手指悬停在上面的时候，有一个手指。

selector li:hover { cursor: pointer; }

这里有一个小提琴来显示它

相关文章：