Question

我有一个使用javascript的分割菜单系统。因为即时通讯请求信息，我使用输入标签。

我不想要复选框，文本框，无线电按钮等干扰设计。所以我尝试了隐藏的输入类型。保持设计，但如果没有选择任何内容，则保持恢复为女性或列表中的第一个。例如。我选择男性并提交。男性选择进入我的代码。现在，我做了一些其他的事情并点击提交，下面的代码恢复为女性而不是我这么说。它用检查或无线电来做这个，所以为什么用“隐藏”这样做呢。

另外，如果我不想破坏功能或设计，我应该使用什么输入类型，或者我怎么能这样做。

<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>{{ gender }}</span></a>

    <ul><li><a href="#"><input id="radio1" name="Gender" value="Female"/>Female</a>
            <a href="#"><input id="radio2" name="Gender" value="Male"/>Male</a>
            <a href="#"><input id="radio3" name="Gender" value="Both Sexes"/>Both Sexes</a>

    </li></ul>
  </li>
</ul>

Answer 1

你使用这些完全错误。单击A标签在此处根本不会改变任何内容。你为什么期望它？

您应该使用单选按钮，但要正确应用样式。或者将隐藏字段减少为一个，并使用Javascript更改其值。不过，这是一个糟糕的设计，因为用户被赋予 no 指示他们所选择的内容。

Answer 2

那是因为你的隐藏输入字段都被命名为相同的东西，因此定义的最后一个字段将始终生效。

编辑：根据处理请求的服务器语言，第一个，最后一个或整个列表可能有效。例如，PHP只会识别提交的最后一个值。

Answer 3

您需要使用radio类型输入，但可以使用style="display:none"将其从视图中删除。