为了避免使用jQuery插件对select进行风格化，我创建了一个使用HTML&CSS但带有隐藏的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();
});
从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>
带有隐藏输入的解决方案（感谢@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();
});