使用 jQuery 模拟选择并提交表单，无需选择

Posted 2023-05-09

【中文标题】使用 jQuery 模拟选择并提交表单，无需选择

【英文标题】：Simulate a select and submit form with jQuery without a select

【发布时间】：2013-07-28 01:43:11

【问题描述】：

为了避免使用 jQuery 插件对select 进行样式化，我使用 html 和 CSS 创建了一个自定义解决方案但隐藏了一个 select 和一个表单。

当我点击 fake select 的链接时，它会在 real select 中选择相同的选项值并提交表单。

您是否有避免这种行为并“删除”select 的想法？ 是否有可能只有一个表单并仅使用 jQuery 提交像真正的select 这样的信息？

HTML 和 php

<div class="sorter">
    <span class="legend">Sort by</span>
    <form method="post" class="sort">

        <?php
            $orderby = array(
                "date" => "Year",
                "director" => "Director",
                "production" => "Production"
            );
        ?>

        <a href="#" id="order_result"><?= (!empty($_POST["select"])) ? $orderby[$_POST["select"]] : "Year" ?></a>
        <ul>
            <li><a href="#" data-sort="date">Year</a></li>
            <li><a href="#" data-sort="director">Director</a></li>
            <li><a href="#" data-sort="production">Production</a></li>
        </ul>

        <select name="select" id="orderby">
            <?php foreach ($orderby as $k => $v) : ?>
            <option value="<?= $k ?>" <?php selected($_POST["select"], $k, 1) ?>><?= $v ?></option>
            <?php endforeach ?>
        </select>
    </form>
</div>

jQuery

​​>

$(".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();
);

【问题讨论】：

“但是有一个隐藏的选择和一个表单。” - 你为什么不使用 <input type="hidden"> 字段并直接从你的伪中单击的项目设置它的值-选择？

为什么不使用插件？您应该永远记住，有些人禁用了 javascript。所以一个好的插件完全不显眼，所以如果你禁用了 javascript，你会看到正常的选择列表。

我没有提交按钮，需要使用javascript提交表单，所以……

【参考方案1】：

如何从select 列表动态创建ul 列表，然后创建hidden input 并删除select 列表？

<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>

【参考方案2】：

带有隐藏输入的解决方案（感谢@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>

-

$(".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();
);