Question

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

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

您是否有想法避免此行为并“删除”select？是否有可能只有一个表单并仅使用jQuery提交真实select之类的信息？

HTML＆amp; 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();
});

Answer 1

如何从ul列表动态创建select列表，然后创建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>

Answer 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();
});

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

HTML＆amp; PHP

的jQuery

2 个答案: