如何在AngularJS中实现下拉选「Other」时显示文本框？

嘿，我来帮你搞定这个需求！其实实现起来没那么复杂，核心就是监听下拉框的change事件，根据选中的值来控制对应文本框的显示和隐藏。我给你一套完整的代码示例，你可以直接用或者根据自己的项目调整：

1. 基础HTML结构 #

首先我们需要搭建下拉框和对应文本框的结构，文本框初始设置为隐藏状态：

<!-- 国家选择区域 -->
<div class="form-group">
  <label for="country">国家:</label>
  <select id="country">
    <option value="usa">美国</option>
    <option value="china">中国</option>
    <option value="other">Other</option>
  </select>
  <input type="text" id="country-other" placeholder="请输入国家名称" style="display: none;" />
</div>

<!-- 货币选择区域 -->
<div class="form-group">
  <label for="currency">货币:</label>
  <select id="currency">
    <option value="usd">美元</option>
    <option value="cny">人民币</option>
    <option value="other">Other</option>
  </select>
  <input type="text" id="currency-other" placeholder="请输入货币名称" style="display: none;" />
</div>

2. 可选：CSS优化布局 #

为了让界面更美观，我们可以加一点基础样式，让元素对齐更舒服：

.form-group {
  margin: 15px 0;
}

label {
  display: inline-block;
  width: 80px;
  text-align: right;
  margin-right: 10px;
}

select, input[type="text"] {
  padding: 6px 8px;
  width: 220px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

3. JavaScript核心逻辑 #

这里我写了一个通用函数，避免重复代码（毕竟国家和货币的逻辑是一样的），只需要传入下拉框和文本框的ID就能复用：

// 通用切换函数：根据下拉框选择值控制文本框显示/隐藏
function toggleOtherInput(selectId, inputId) {
  const selectElement = document.getElementById(selectId);
  const inputElement = document.getElementById(inputId);
  
  // 监听下拉框的change事件
  selectElement.addEventListener('change', function() {
    if (this.value === 'other') {
      inputElement.style.display = 'inline-block'; // 显示文本框
    } else {
      inputElement.style.display = 'none'; // 隐藏文本框
      inputElement.value = ''; // 清空文本框内容，避免切换后残留旧值
    }
  });
}

// 初始化国家和货币的监听
toggleOtherInput('country', 'country-other');
toggleOtherInput('currency', 'currency-other');

可选：jQuery版本（如果你项目中在用jQuery） #

如果你的项目已经引入了jQuery，代码可以更简洁：

function toggleOtherInput(selectSelector, inputSelector) {
  $(selectSelector).on('change', function() {
    // toggle()方法会根据条件自动切换显示/隐藏
    $(inputSelector).toggle(this.value === 'other').val('');
  });
}

// 初始化监听
toggleOtherInput('#country', '#country-other');
toggleOtherInput('#currency', '#currency-other');

关键点说明 #

• 一定要确保下拉框中「Other」选项的value值是other（或者你可以改成自己定义的，只要JS判断时对应上就行）
• 切换回非Other选项时，记得清空文本框内容，避免用户再次打开时看到之前输入的内容
• 原生JS版本不需要依赖任何库，兼容性更好，适合大多数项目

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