如何用JavaScript获取HTML select标签值与文本？下拉框为空错误排查

核心错误 #

你动态拼接的HTML结构不完整，赋值给trainers.innerHTML的字符串仅包含<select>标签开头、<option>标签开头和value属性，缺失了三个必要部分：option的显示文本、option闭合标签、select闭合标签。浏览器无法识别有效下拉选项，因此渲染出的下拉框为空。

修复代码 #

模板字符串写法（推荐，兼容性覆盖主流现代浏览器） #

function edit_rowC(no) {
    var trainers = document.getElementById("trainers_rowC" + no);
    var trainers_data = trainers.innerHTML.trim();
    // 补全所有标签结构
    trainers.innerHTML = `<select id='trainers_options${no}'>
        <option value='${trainers_data}' selected>${trainers_data}</option>
        <!-- 有其他选项可以在这里继续拼接 -->
    </select>`;
}

字符串拼接写法（兼容旧版浏览器） #

function edit_rowC(no) {
    var trainers = document.getElementById("trainers_rowC" + no);
    var trainers_data = trainers.innerHTML.trim();
    trainers.innerHTML = "<select id ='trainers_options" + no + "'><option value='" + trainers_data + "' selected>" + trainers_data + "</option></select>";
}

注：给默认option加selected属性可以保证原来的文本默认被选中，符合编辑场景的交互逻辑。

补充：select取值/获取文本方法 #

后续需要获取生成的select的选中值或显示文本时，可使用如下代码：

const select = document.getElementById('trainers_options' + no);
// 获取选中项的value值
const selectedValue = select.value;
// 获取选中项的显示文本
const selectedText = select.options[select.selectedIndex].text;

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