使用jquery </li>从多个<li>中获取选定的值

时间:2011-12-04 07:25:52

标签: jquery

我有一个无序的数据列表,并且在每个<li>内我有一个隐藏的输入,其中包含每个<li>的不同值

<form>
    <ul>
    <li><input type="hidden" id="tid" value="1" />Apple</li>
    <li><input type="hidden" id="tid" value="2" />Orange</li>
    <li><input type="hidden" id="tid" value="3" />Pear</li>
    </ul>

</form>

当通过jquery点击特定<li>时,如何从隐藏输入中检索post值?

3 个答案:

答案 0 :(得分:5)

$(function () {

  $("form li").on('click', function () {
    var tid = $('input[type="hidden"]', this).val();

    alert (tid);
  });

});

答案 1 :(得分:0)

HTML 实施的更好做法是使用块锚标记li包装<a style="display: block" />的内容。这应该使它在li区域内可以点击。 然后,在锚标记上实现您的属性。

<form id="form_id_here" method="POST" action="semething.php">
    <input type="hidden" name="fruit_id" value="0" />
    <ul id="ul_id_here">
        <li><a fruit_id="1" href="#">Apple</a></li>
        <li><a fruit_id="2" href="#">Orange</a></li>
        <li><a fruit_id="3" href="#">Pear</a></li>
    </ul>
</form>

最后,您的 Javascript 部分可以处理点击次数:

$(function ()
{
    $("#ul_id_here > li > a").click(function(e)
    {
        e.preventDefault();
        $('#form_id_here > input[name="fruit_id"]').val($(this).attr("fruit_id"));

        $('#form_id_here').submit(); //or do ajax here
    });

});

答案 2 :(得分:0)

您好我找到了自己的解决方案。

这是html:

<ul>
<li><a href="#" id="fruit"><input type="hidden" value="1" name="fruitId" id="fruitId">Apple</a></li>
<li><a href="#" id="fruit"><input type="hidden" value="2" name="fruitId" id="fruitId">Orange</a></li>
</ul>

的Javascript

$("a#fruit").click(function() {
        var fid = $('input[type="hidden"]', this).val();
        alert (fid);
    });