使用Vanilla JS实现Select下拉框数据库取值回显及值提交方案咨询

一、页面加载时设置默认选中值 #

直接用原生JS实现即可，代码如下：

// 替换为实际从数据库读取到的存储值
const savedCountry = '你的数据库返回字符串'; 
const countrySelect = document.getElementById('country');

// 等DOM加载完成后执行赋值
document.addEventListener('DOMContentLoaded', () => {
  // 遍历所有option判断是否有匹配项
  const isOptionExist = Array.from(countrySelect.options).some(option => option.value === savedCountry);
  // 匹配成功则选中对应项，否则默认显示「Select Country」（对应value为"null"）
  countrySelect.value = isOptionExist ? savedCountry : 'null';
});

二、值变更与提交逻辑调整 #

不需要额外添加隐藏字段，调整逻辑如下： #

• 普通表单提交场景：你已经给select设置了name="country"属性，提交表单时浏览器会自动将当前选中option的value值作为country参数提交，和你之前用text input的提交逻辑完全一致，无需修改。
• AJAX提交场景：取值方式和text input完全相同，直接用document.getElementById('country').value就能拿到选中的字符串值，你之前的提交代码不需要做任何调整。

如果需要监听值变更实时触发提交，可以绑定change事件：

countrySelect.addEventListener('change', () => {
  const currentSelectedValue = countrySelect.value;
  // 直接调用你之前的提交逻辑即可，比如 submitToDB(currentSelectedValue)
});

补充提示 #

你现有HTML代码里的select标签有语法问题，把<select id="country" class="form__input" name="country"/>末尾的/去掉，改为<select id="country" class="form__input" name="country">，避免部分浏览器解析异常。

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