没有表单提交的jQuery选择答案

【问题标题】：Jquery select without form submit没有表单提交的jQuery选择
【发布时间】：2011-07-22 05:07:58
【问题描述】：

我想为用户制作一个选择器，以便在虚拟商店中以 asc/desc 顺序订购价格。

问题是我不想使用表单（每次刷新页面时都会提交表单等）。所以，我想要一个表单外的选择（jquery select），这样当用户选择一个选项时，我可以设置一个 php 变量的值（以便知道我将如何进行排序）。

是否可以在表单之外使用选择进行此排序（使用 Jquery）？是否可以在选择列表元素时设置一个 php 变量？（直到现在，我都是通过 post 值发送，并根据从表单接收到的 post 数据设置该变量）

谢谢

【问题讨论】：

标签： jquery list forms select submit

【解决方案1】：

您可以使用“更改”事件进行选择并发送 ajax 调用（使用 jQuery 相当轻松）。您需要阅读有关 Ajax 的内容，以便了解基本概念（我确定这里有一个帖子）并查看 jQuery api on ajax。

Ajax 是一种无需使用表单或重新加载整个页面即可将信息发布/获取回服务器的方法。如何使用选择的一个示例是：

$("#yourSelectID").change(function(){
    $.ajax({
        url:"site.php",
        data:{"returnVal":$(this).val()},
        success:function(){ /* do any further processing stuff here */}
    });
});

请注意，当您运行 ajax 调用时，页面上的其他事件将同时运行，因此不要期望 ajax 会按堆栈顺序发生。

【讨论】：

【解决方案2】：

尝试使用 AJAX 代替表单提交。有很多方法可以做到这一点..

$('select').change(function() {
    $.post($(this).closest('form').attr('action'), $(this).closest('form').serialize(), function(data) {
        alert(data);//response from PHP
    });
});

将选择保留在此处的表单中以实现向后兼容性并添加此事件处理程序：

$('form').submit(function() {
    return false;
});

编辑：

没有表单版本，设置你自己的选项：

var href = 'http://yoursite.com';

$('select').change(function() {
    $.post(href, { val : $(':selected', this).val()}, function(data) {
        alert(data);//response from PHP
    });
});

【讨论】：

只需将上面的配置选项更改为您自己的。请参阅：api.jquery.com/jQuery.post 解决方案有多种工作方式。

【解决方案3】：

您不需要表单来激活选择上的“更改”事件。只需在 jQuery 中选择并绑定“更改”事件即可。

$(函数() { $("选择").change(函数() { // 做一点事 }); });

【讨论】：

【解决方案4】：

如果只想阻止页面刷新，可以在onsubmit-event回调中返回false。

【讨论】：