获取select元素值返回undefined或空值的技术问题求助

你的问题核心是所有<option>标签都没有设置value属性，导致JavaScript无法稳定获取选中值——部分浏览器可能会默认用option的文本内容作为value，但行为不一致，加上第一个无选中状态的选项没有指定value，最终出现undefined或空值的情况。

解决方案步骤： #

1. 给每个<option>添加明确的value属性
   修改后的select代码如下：

<select class="form-control" id="labels" onchange="chng()">
    <option value="">Extra Label</option>
    @for (int i = 1; i < 21; i++)
    {
        <option value="@i">@i</option>
    }
</select>

• 第一个选项设置value=""，方便区分用户未选择具体数字的状态
• 循环生成的选项把value设为@i，和选项文本保持一致，确保选中时能获取到对应数字

2. （可选）优化chng函数，简化DOM获取
   可以直接把当前select元素传入函数，避免重复通过ID获取DOM：

function chng(selectEl) {
    var selectedValue = selectEl.value;
    // 用jQuery的话就是：var selectedValue = $(selectEl).val();
    alert(selectedValue);
    var addLabelsBtn = document.getElementById('addLabelsBtn');
    addLabelsBtn.href = '/Amazon/AddLabel?orderId=@Model.AmazonOrderId&extraLabel=' + selectedValue;
}

对应的select标签修改onchange属性：

<select class="form-control" id="labels" onchange="chng(this)">

完成以上修改后，就能正常获取select的选中值，弹窗和后续的href拼接都会正常工作。

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