Select 值更改未被识别并传递给 ajax

Question

我的代码是这样设置的：

先一个select:

 <select id="select_order">
     <option value="0">Pick One</option>
     <option value="1">Ascending</option>
     <option value="2">Descending</option>
  </select>

在我的 javascript 中：

var sortv= "database_percent";
var sorto= "asc";
$("#select_order").change(function(){
if (("#select_order").val == 1) {
sortv = "database_percent";
sorto = "asc";
}
else if (("#select_order").val == 2 ){
sortv = "database_percent";
sorto = "desc";
}
else {
alert("Pick something");
}
});

$.ajax({
url: 'all_get_2.php?category=ethnicity',
type: 'GET',
dataType: 'JSON',
data: {sortvalue: sortv ,sortorder:sorto},
})

我希望做的是从下拉列表中获取值 selected，然后将这些新变量（用于 sortv 和 sorto）传递给 ajax。 AJAX 从我的 PHP 文件中获取 JSON，该文件用于绘制图表。

我在 if...else 代码之上设置了 sortv 和 sorto 的变量，这样 AJAX 有一些变量可以首先加载图表（这样它就不会抛出错误） .但是，当我 select 与 select 不同的东西时，我收到了与我的 ELSE 条件相对应的警报。我不知道为什么。

假设我（即你）可以解决这个问题，这是否是在 AJAX 中传递新数据变量的正确方法？如果该代码是我的 .done 语句（未显示），我真的应该期望我的图表在这些变量发生变化时重绘吗？

如有任何想法，我们将不胜感激。

Answer 1

使用 .val() 而不是 .val 来接收值。 val() 是一个可以获取或设置字段值的函数。

您还应该在事件处理函数中使用 $(this)，因为在您的代码中，事件由您的 select 字段调用，因此您不需要重新 select 它按编号：

$("#select_order").change(function(){
    var call = true;
    switch(parseInt($(this).val())) {
        case 1:
            sortv = "database_percent";
            sorto = "asc";
        break;
        case 2:
            sortv = "database_percent";
            sorto = "desc";
        break;
        default:
            call = false;
            alert("Pick something");
        break;
    }

    if(call) {
        $.ajax({
            url: 'all_get_2.php?category=ethnicity',
            type: 'GET',
            dataType: 'JSON',
            data: {sortvalue: sortv ,sortorder:sorto},
            success: function(data) {
                // your response handler here
            }
        });
    }
});

Answer 2

.val() 是一个函数，不是属性。

所以你需要使用：

$("#select_order").val()

此外，您在选择器之前缺少 $。您可以在处理程序中使用 this.value。

Select 值更改未被识别并传递给 ajax

Select value change not recognized and passed to ajax

javascript

php

ajax

jquery