如何根据ASP表单的国家选择切换州/省输入框的占位文本

完全没问题！这个需求很常见，只需要用一点点JavaScript监听下拉框的选择变化，就能动态切换输入框的占位文本。下面给你两种实用的实现方案，你可以根据项目情况选择：

方案1：原生JavaScript（无依赖，通用型） #

先给你的表单元素加上ID方便JS定位（或者直接用ASP.NET生成的默认ID也可以），然后添加监听逻辑：

<form>
  <div class="form-group">
    <select asp-for="Country" id="countrySelect" class="form-control" required="required">
      <option value="Canada">Canada</option>
      <option value="U.S">U.S</option>
    </select>
  </div>
  <div class="form-group">
    <input asp-for="State" id="stateInput" class="form-control" placeholder="Province" />
    <span asp-validation-for="State" class="text-danger"></span>
  </div>
  <button type="submit"> Submit </button>
</form>

<script>
// 获取页面元素
const countryDropdown = document.getElementById('countrySelect');
const stateInputBox = document.getElementById('stateInput');

// 监听下拉框的选择变化事件
countryDropdown.addEventListener('change', function() {
    // 根据选中的国家设置对应的占位文本
    if (this.value === 'Canada') {
        stateInputBox.placeholder = 'Province';
    } else if (this.value === 'U.S') {
        stateInputBox.placeholder = 'State';
    }
});

// 页面加载完成后初始化一次，避免默认选中值和占位文本不匹配
window.addEventListener('load', function() {
    if (countryDropdown.value === 'U.S') {
        stateInputBox.placeholder = 'State';
    }
});
</script>

方案2：jQuery实现（如果项目已引入jQuery） #

如果你的项目已经在用jQuery，代码可以更简洁：

<form>
  <div class="form-group">
    <select asp-for="Country" id="countrySelect" class="form-control" required="required">
      <option value="Canada">Canada</option>
      <option value="U.S">U.S</option>
    </select>
  </div>
  <div class="form-group">
    <input asp-for="State" id="stateInput" class="form-control" placeholder="Province" />
    <span asp-validation-for="State" class="text-danger"></span>
  </div>
  <button type="submit"> Submit </button>
</form>

<script>
$(document).ready(function() {
    // 监听下拉框变化
    $('#countrySelect').on('change', function() {
        const newPlaceholder = $(this).val() === 'Canada' ? 'Province' : 'State';
        $('#stateInput').attr('placeholder', newPlaceholder);
    });

    // 初始化占位文本，匹配默认选中的国家
    const initialPlaceholder = $('#countrySelect').val() === 'Canada' ? 'Province' : 'State';
    $('#stateInput').attr('placeholder', initialPlaceholder);
});
</script>

额外提示 #

• 如果你不想手动加ID，ASP.NET的asp-for会自动生成和属性名一致的ID（比如asp-for="Country"对应的ID是Country），直接把JS里的选择器改成document.getElementById('Country')或者$('#Country')就行。
• 以后如果要新增更多国家（比如澳大利亚对应Territory），只需要在判断逻辑里加新的分支即可。
• 初始化步骤很重要，它能保证页面刚加载时，占位文本就和默认选中的国家匹配，不会出现违和感。

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