将表单功能添加到菜单

时间:2012-01-20 03:11:04

标签: javascript html

我几天前问了这个问题<input type="hidden" functionality issue,并且基本上告诉它一团糟,你做错了,并正确地设计它。事情是我不知道如何生病以不同的方式问同一个问题。我再问一次,因为我现在大约10小时,而且没有更接近解决方案。

我想添加一个获取信息的表单函数。说

<form action="" method="get">

我的信念是我必须在某处添加一个输入标签以实际获取信息

<input type="....

完成它
<input type="submit" value="submit">
</form>

提交。

如何将此功能合并到下面的代码中以添加功能而不会丢失样式。我没有添加style / css部分,因为我认为它对手头的问题无关紧要。

<script type="text/javascript">
    $(document).ready(function() {
        $(".dropdown  a").click(function() {
            $(".dropdown ul").toggle();
        });

        });                                
        $(".dropdown ul li a").click(function() {
            var text = $(this).html();
            $(".dropdown a span").html(text);
            $(".dropdown ul").hide();
            $("#result").html("Selected value is: " + getSelectedValue("sample"));
        });

        function getSelectedValue(id) {
            return $("#" + id).find("li a span.value").html();
        }

        $(document).bind('click', function(e) {
            var $clicked = $(e.target);
            if (! $clicked.parents().hasClass("dropdown"))
                $(".dropdown ul").hide();
        });

    });
 <form action="" method="get"> 
 <div class="sort">
<ul> 
  <li id="sample" class="dropdown">
    <a href="#">Gender |<span>Both sexes</span></a>

    <ul><li><a href="#">Male<span class="value">Male</span></a>
            <a href="#">Female<span class="value">Female</span></a>
            <a href="#">Both Sexes<span class="value">Both Sexes</span></a>

    </li></ul>
  </li>
</ul>
 <input type="submit">
 </form>

1 个答案:

答案 0 :(得分:0)

我会在页面上有一个带有单个隐藏字段的表单。然后我会有三个选择这个菜单。我会将javascript事件处理程序附加到每个项目的onclick事件,并在事件处理程序中将隐藏字段设置为特定值。比如,1,2或3.当用户点击提交按钮时,将提交此字段。

这是代码:http://jsbin.com/izaruv/2