JQuery/Ajax报错求助：获取HTML option标签值失败

嘿，我来帮你梳理下代码里的问题！你遇到的错误主要是语法和逻辑层面的，我一个个给你拆解：

• $.ajax配置对象内不能直接声明变量：你在$.ajax()的参数对象里直接写了var id = $(this).val;，这是典型的语法错误——因为ajax接收的是一个配置对象，对象内部只能写键: 值的形式，不能在这里声明变量，得把变量定义移到ajax外面。

• val是jQuery方法，必须加括号调用：$(this).val拿到的是方法本身，不是下拉框选中的值，得改成$(this).val()才能获取到实际选中的option值。

• data参数的语法错误：data: {id = id}这种写法不符合JS对象的语法规则，键值对之间要用冒号:分隔，应该改成data: {id: id}。另外，你设置了contentType: "application/json"，这时候需要把数据转换成JSON字符串，不然后端可能无法正确解析，所以得用JSON.stringify({id: id})。

• this指向混乱：你把ajax逻辑套在$(function(){...})里面，这里的this并不是触发get_states函数的下拉框元素，会导致拿不到正确的选中值。建议把DOM就绪的回调用来绑定事件，而不是嵌套在函数内部。

修复后的完整代码示例 #

function get_states() {
  // 这里的this指向触发事件的select元素，正确获取选中值
  var id = $(this).val();
  
  $.ajax({
    url: 'competitors/get_states.php',
    method: 'post',
    contentType: "application/json",
    // 把对象转为JSON字符串，适配contentType配置
    data: JSON.stringify({id: id})
  }).done(function(msg){
    alert(msg);
  }).fail(function(msg, TxtStatus){
    alert("fallo: "+ TxtStatus);
  });
}

// 在DOM加载完成后，给下拉框绑定change事件
$(function() {
  // 替换成你实际的select元素ID或选择器
  $('#your-select-element').on('change', get_states);
});

这样调整后，应该就能正常获取option的值并发起ajax请求啦！

内容的提问来源于stack exchange，提问作者Mexa Fireg