.NET环境下基于URL多邮政编码实现指定Div显示的问题

嘿，我来帮你搞定这个多邮编匹配的问题，顺便还能优化下现有代码里的小细节～

第一步：修正跳转URL的参数错误 #

你原来的goToPage函数里URL拼接写错了，参数名应该是ZipCode（正确格式是?参数名=值），同时我们可以加个回车触发提交的逻辑，提升用户体验：

function goToPage() {
  const zipCode = document.getElementById('ZipCode').value.trim();
  if (zipCode) { // 加个简单的非空校验，避免空跳转
    window.location = "results.aspx?ZipCode=" + zipCode;
  }
}

// 给输入框添加回车触发提交的事件
document.getElementById('ZipCode').addEventListener('keypress', function(e) {
  if (e.key === 'Enter') {
    goToPage();
  }
});

对应的HTML可以稍微优化下提示：

<input type="text" id="ZipCode" placeholder="输入邮政编码"/>
<button type="button" id="ZipSearch" onclick="goToPage();">SEARCH</button>

第二步：用映射表实现多邮编匹配（results.aspx页面） #

不用写一堆重复的if判断，我们可以创建一个邮编-区域ID的映射表，后续加新邮编/区域只需要更新这个表，维护起来超方便。

先统一区域的初始样式 #

把所有区域的隐藏样式统一写在CSS里，不用每个div都加style="display:none"：

.region {
  display: none;
}

然后给每个区域div加上统一的region类：

<div id="california" class="region">
  <p>California</p>
</div>
<div id="washington" class="region">
  <p>Washington</p>
</div>
<div id="nationwide" class="region">
  <p>Nationwide</p>
</div>

核心的JQuery匹配逻辑 #

$(function() {
  // 1. 定义邮编与对应区域ID的映射，支持多个邮编对应同一个区域
  const zipRegionMap = {
    "91343": "california",
    "91345": "california", // 新增加州邮编直接加在这里
    "98001": "washington",
    "98003": "washington", // 新增华盛顿邮编直接加在这里
    // 可以继续添加更多邮编和区域的对应关系
  };

  // 2. 封装一个获取URL参数的小工具函数
  function getUrlParam(paramName) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(paramName);
  }
  const currentZip = getUrlParam('ZipCode');

  // 3. 根据邮编匹配并显示对应区域
  if (currentZip && zipRegionMap[currentZip]) {
    // 先隐藏所有区域
    $('.region').hide();
    // 再显示匹配到的目标区域
    $('#' + zipRegionMap[currentZip]).show();
  } else {
    // 没有匹配到邮编时，显示默认区域（比如nationwide）
    $('.region').hide();
    $('#nationwide').show();
  }
});

为什么这样做更好？ #

• 扩展性拉满：后续要加新的邮编或者新区域，只需要在zipRegionMap里添一组键值对就行，不用写一堆重复的if
• 代码更简洁：把重复的DOM操作逻辑统一起来，避免冗余
• 维护成本低：所有邮编对应关系都集中在一个对象里，一目了然

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