如何使用jQuery将JSP下拉列表替换为非原有选项的新值？

算力阿峰

2026-8-18

解决方案

先说说你之前代码的问题：

你在前端jQuery代码里用了${sol.lovVal}和${someValue}这种EL表达式，这些是服务器端渲染时才会解析的语法，前端JS运行时根本认不出它们，会直接把这些字符串当成option的value或文本内容，自然达不到预期效果。
另外如果你的someValue是通过Ajax请求获取的，得确保代码写在Ajax的成功回调里，不然会出现值还没拿到就操作下拉框的情况。

下面是两种可行的写法：

1. 直接使用前端变量生成自定义选项

如果你的新值是前端已有的变量（比如固定值或者提前拿到的）：

// 自定义的value和显示文本
var customValue = "your_custom_value";
var someValue = "自定义选项文本";

// 清空下拉框并添加新选项
$('#salution')
  .empty() // 清空所有原有选项，比find('option').remove()更简洁
  // 用jQuery创建option元素，避免字符串拼接的问题
  .append($('<option>', {
    value: customValue,
    text: someValue
  }))
  .val(customValue); // 可选：设置该选项为选中状态

2. 结合Ajax请求动态获取新值

如果新值是通过Ajax从后端获取的，要把操作下拉框的代码放在Ajax的成功回调里：

$.ajax({
  url: "/your-api-endpoint", // 替换成你的请求地址
  method: "GET", // 或POST，根据你的接口调整
  success: function(data) {
    // 假设后端返回的数据里包含新的value和文本，比如data.newVal和data.newText
    var newVal = data.newVal;
    var newText = data.newText;

    // 更新下拉框
    $('#salution')
      .empty()
      .append($('<option>', {
        value: newVal,
        text: newText
      }))
      .val(newVal);
  },
  error: function() {
    // 可选：处理请求失败的情况
    alert("获取数据失败");
  }
});