Php 使用jQuery模拟选择并提交表单，而不使用select

为了避免使用jQuery插件来设置select的样式，我使用HTML和CSS创建了一个自定义解决方案，但是使用了一个隐藏的select和一个表单

当我点击假选择的链接时，它在真选择中选择相同的选项值，我提交表单

您是否有办法避免这种行为并删除select？ 是否可以只使用一个表单，并使用jQuery提交像true select only这样的信息

HTML和PHP 如何从选择列表动态创建ul列表，然后创建隐藏输入并删除选择列表

---

带有隐藏输入的解决方案谢谢@nnnnnn，我不经常使用它们…效果很好

<form method="post" class="sort">
    <input type="hidden" name="sortby" id="sortby">
    <?php
        $orderby = array(
            "date" => "Année",
            "director" => "Réalisateur",
            "production" => "Production"
        );
    ?>
    <a href="#" id="order_result"><?= (!empty($_POST["sortby"])) ? $orderby[$_POST["sortby"]] : "Année" ?></a>
    <ul>
        <?php foreach ($orderby as $k => $v) : ?>
        <li><a href="#" data-sort="<?= $k ?>"><?= $v ?></a></li>
        <?php endforeach ?>
    </ul>
</form>

---

但是有一个隐藏的选择和一个表单为什么不使用字段并直接从伪选择中单击的项目设置其值？为什么不使用插件？您应该始终记住，有些人禁用了javascript。所以一个好的插件工作起来完全不引人注目，所以如果你禁用了javascript，你会看到正常的选择列表。我没有提交按钮，我需要使用javascript来提交表单，所以…

$(".sorter a").on("click", function(e){
    var text = $(this).text();
    $("#order_result").text(text);
    $(this).closest("form").find($("select option[value=" + $(this).data('sort') + "")).prop("selected", true);
    $(this).closest("form").submit();
    e.preventDefault();
});

<script type="text/javascript">
  $(function() {
    var select  = $("select#orderby").hide(0);
    var ul      = $("<ul />").insertBefore( select );
    var input   = $("<input />",{"type":"hidden","name":select.attr("name"),"value":select.val()}).insertAfter( ul );

    $("option",select).each(function() {
      var val = $(this).val();
      var txt = $(this).text();
      var li  = $("<li />").appendTo( ul ),
          a   = $("<a />",{"href":"#"}).on("click", function(event) {
            event.preventDefault();
            input.val( val );
            //select.val( val );
            $(this).parents("form:first").trigger("submit");
          }).html( txt ).appendTo( li );
    });

    select.remove();
  });
</script>

<form method="post" class="sort">
    <input type="hidden" name="sortby" id="sortby">
    <?php
        $orderby = array(
            "date" => "Année",
            "director" => "Réalisateur",
            "production" => "Production"
        );
    ?>
    <a href="#" id="order_result"><?= (!empty($_POST["sortby"])) ? $orderby[$_POST["sortby"]] : "Année" ?></a>
    <ul>
        <?php foreach ($orderby as $k => $v) : ?>
        <li><a href="#" data-sort="<?= $k ?>"><?= $v ?></a></li>
        <?php endforeach ?>
    </ul>
</form>

$(".sorter a").on("click", function(e){
    $("#order_result").text($(this).text());
    $(this).closest("form").find("#sortby").val($(this).data("sort"));
    $(this).closest("form").submit();
    e.preventDefault();
});