Question

我有一个下拉列表，其国家/地区名称带有国旗图片。由于我们无法使用<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>

Answer 1

你可以这样做。看看小提琴

小提琴Link

它会给你一个想法。

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

Answer 2

这可能是一个有点hacky解决方案，但使用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; }

Here's a fiddle to show it

如何从使用<ul> <li>标记</li> </ul>创建的下拉列表中捕获值

2 个答案: