下拉选择菜单：如何获取弹出的可选/其他文本框的值

嘿，这个问题我熟！你现在的场景是下拉框选中「Other」时才动态生成文本框，要获取它的输入值对吧？我给你几种靠谱的实现方式：

一、前端主动获取值（比如按钮触发） #

因为这个文本框是动态生成的，你不能在页面加载完成就直接获取它（那时候它还不存在），得等它被渲染出来后再去拿。可以用下面的代码：

function getOtherInputValue() {
  // 通过name属性定位文本框
  const otherInput = document.querySelector('input[name="other"]');
  // 先判断元素是否存在，避免报错
  if (otherInput) {
    return otherInput.value.trim();
  }
  // 如果文本框没生成（下拉没选Other），返回空字符串
  return '';
}

比如你可以加个按钮测试：

<button onclick="console.log(getOtherInputValue())">查看Other输入值</button>

二、表单提交时处理 #

如果是要在表单提交时获取并验证这个值，或者确保后端能拿到，这里有两个关键点：

1. 因为你给动态生成的input加了name="other"属性，只要它存在（下拉选了Other），表单提交时会自动把这个参数一起提交，后端直接通过other字段就能获取值（比如PHP用$_POST['other']，Node.js用req.body.other）。
2. 可以在表单提交前做验证，确保选了Other时文本框不为空：

// 假设你的表单有id="travelForm"
document.getElementById('travelForm').addEventListener('submit', function(e) {
  const arriveViaSelect = document.getElementById('travel_arriveVia');
  // 检查下拉框是否选中了Other
  if (arriveViaSelect.value === 'Other') {
    const otherInput = document.querySelector('input[name="other"]');
    // 验证输入是否为空
    if (!otherInput.value.trim()) {
      e.preventDefault(); // 阻止表单提交
      alert('请填写Other对应的内容哦！');
    }
  }
});

三、小提醒 #

• 一定要先判断文本框是否存在再获取值，不然会抛出「Cannot read properties of null」的错误。
• 如果你用jQuery的话，写法更简洁：$('input[name="other"]').val()，同样要确保元素存在再调用。

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