Rails如何通过JavaScript将下拉框选中文本赋值给hidden_field隐藏域

你当前代码的问题在于JS逻辑里取的是<select>标签的value属性，这个属性对应的值就是你@locations数组每个子项的第二个元素（也就是城镇ID），自然拿不到展示用的城镇名。你需要获取选中的<option>标签的文本内容，再赋值给隐藏域即可。

修改后的JS代码（jQuery版，适配你现有依赖） #

$('#location').change(function() {
  // 获取当前选中项的显示文本
  const selectedTownName = $(this).find('option:selected').text();
  // 赋值给隐藏域
  $('#locationName').val(selectedTownName);
// 页面加载完成后主动触发一次赋值，避免用户未修改下拉直接提交时隐藏域为空
}).trigger('change');

原生JS版（如果后续移除jQuery依赖也可以用） #

const locationSelect = document.getElementById('location');
const locationNameHidden = document.getElementById('locationName');

function updateLocationName() {
  const selectedOption = locationSelect.options[locationSelect.selectedIndex];
  locationNameHidden.value = selectedOption.text;
}

// 绑定下拉变更事件
locationSelect.addEventListener('change', updateLocationName);
// 页面加载完成后初始化赋值
updateLocationName();

修改完成后提交表单时，你可以在后端直接通过params[:location_name]获取到选中的城镇名称，params[:location]还是原来的城镇ID，两个值都能正常拿到。

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