javascript - <输入类型 ="hidden"功能问题

Question

我有一个使用 javascript 的拆分菜单系统。因为我请求信息，所以我使用输入标签。

我不希望复选框、文本框、单选按钮等干扰设计。所以我尝试了隐藏的输入类型。保留设计，但如果未选择任何内容，则继续恢复为女性或列表中的第一个。例如。我选择男性并提交。男性选择输入我的代码。现在，我做了其他事情并单击提交，下面的代码在没有我这么说的情况下恢复为女性。它不会用支票或 radio 来做这件事，那么为什么它用“隐藏”来做这件事。

此外，如果我不想破坏功能或设计，我应该使用什么输入类型，或者我还能如何解决这个问题。

<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 更改其值。不过，这是一个糟糕的设计，因为用户没有知道他们选择了什么。