为何JS拼接的URL字符串中&在部分服务器环境下会转为#038;？

问题原因 #

• HTML标准要求属性值中的&必须转义为HTML实体&（即&），部分本地服务器环境（如搭配PHP的Apache）或页面解析模式下，浏览器或服务器会自动对DOM属性中的特殊字符进行转义。
• 当通过jQuery的.val()设置<option>的value时，JS中的原始&会被转义为&存储在属性中；而jsfiddle的运行环境未强制这种转义，或前端读取时自动完成了解码，因此表现正常。
• 跳转时，window.location使用的是转义后的字符串，导致实际URL变为?test=1&something=1，PHP会将&something=1识别为test参数的一部分，无法正确解析出$_GET['something']。

解决方案 #

方案1：使用data属性存储URL（推荐） #

将URL存储在<option>的data-url属性中，避免HTML实体转义对URL的影响：

<script>
$(document).ready(function() {
  const targetUrl = '?test=1&something=1';
  $('#select option').attr('data-url', targetUrl);
});

$(document).on('change', '#select', function(e) {
  const selectedUrl = $(this).find('option:selected').attr('data-url');
  if (selectedUrl) {
    window.location = selectedUrl;
  }
});
</script>

<select id="select">
  <option data-url="">Test</option>
  <option data-url="">Test</option>
</select>

方案2：跳转前解码HTML实体 #

保留原有的value存储方式，在跳转前对获取到的URL进行HTML实体解码：

<script>
$(document).ready(function() {
  const targetUrl = '?test=1&something=1';
  $('#select option').val(targetUrl);
});

$(document).on('change', '#select', function(e) {
  let selectedUrl = $(this).val();
  // 通过临时DOM元素解码HTML实体
  selectedUrl = $('<div/>').html(selectedUrl).text();
  if (selectedUrl) {
    window.location = selectedUrl;
  }
});
</script>

<select id="select">
  <option value="">Test</option>
  <option value="">Test</option>
</select>

方案3：直接拼接URL跳转（更简洁） #

如果所有选项使用相同的URL逻辑，也可以跳过存储URL到选项的步骤，直接在change事件中拼接并跳转：

<script>
$(document).on('change', '#select', function(e) {
  // 若不同选项对应不同参数，可根据选项值动态拼接
  window.location = '?test=1&something=1';
});
</script>

<select id="select">
  <option value="">Test</option>
  <option value="">Test</option>
</select>

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