如何通过Ajax将jQuery Selectmenu值传递给PHP并实现无刷新显示

你的代码主要有两个核心问题导致无法动态更新选中值：

1. Ajax请求仅执行一次：当前代码在页面初始化时就发送了请求，但没有监听下拉菜单的选项变更事件，切换选项时不会触发新的请求。
2. 数据传递逻辑错误：data: { number }这种简写需要提前定义对应变量，但你没有获取下拉框的选中值，导致传递的数据无效。

下面是修正后的完整代码：

修正后的html_file.php #

<script>
$(function() {
  // 初始化Selectmenu组件
  $("#number")
    .selectmenu()
    .selectmenu("menuWidget")
    .addClass("overflow");

  // 监听Selectmenu的选项变更事件
  $("#number").on("selectmenuchange", function() {
    // 获取当前选中的数值
    const selectedNum = $(this).val();
    
    $.ajax({
      method: "POST",
      url: "php_file.php",
      data: { number: selectedNum } // 正确传递选中值
    })
    .done(function(data) {
      // 将返回内容插入到响应容器
      $("#response").html(data);
    })
    .fail(function(xhr, status, error) {
      // 可选：添加错误处理，方便调试
      console.error("Ajax请求失败:", error);
      $("#response").html("请求出错，请稍后重试");
    });
  });

  // 页面加载时主动触发一次事件，显示默认选中值
  $("#number").trigger("selectmenuchange");
});
</script>

<select name="number" id="number">
  <option>1</option>
  <option selected="selected">2</option>
  <option>3</option>
</select>
<div id='response'></div>

修正后的php_file.php #

<?php
// 先判断参数是否存在，避免Undefined index报错
if(isset($_POST['number'])){
  $test = $_POST['number'];
  // 用htmlspecialchars防止XSS风险，测试场景也建议养成习惯
  echo '<div class="profile-font2">', htmlspecialchars($test), '</div>';
} else {
  echo '<div class="profile-font2">请选择一个数字</div>';
}
?>

关键修改说明： #

• 绑定selectmenuchange事件：这是jQuery UI Selectmenu特有的变更事件，比普通change事件更适配组件特性。
• 正确获取选中值：通过$(this).val()实时获取当前选中的数值，确保传递给PHP的数据是最新的。
• 增加错误处理：.fail()方法可以帮你快速排查请求失败的原因，比如文件路径错误、服务器异常等。
• PHP参数校验：避免无参数时的报错，同时通过htmlspecialchars()做基础的安全处理。

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