JavaScript中设置为0后Select选项无法重置问题排查

问题场景 #

需要实现：当另一个选项被选中为0时，将id="ddlALPO1STUpd"的下拉框重置为值为0的选项并禁用；否则启用该下拉框。但现有代码无法完成重置操作。

现有代码 #

逻辑判断代码

if (varALPO1MobNum == "0") {                    
    var selectElement = $('#ddlALPO1STUpd');
    resetSelectElement(selectElement); // 希望重置为值0的选项
    $('#ddlALPO1STUpd').attr('disabled', 'disabled');
} else {
    $('#ddlALPO1STUpd').removeAttr('disabled');
}

重置函数

function resetSelectElement(selectElement) {
selectElement.selectedIndex = 0; 
}

HTML结构

<select name="ctl00$ddlALPO1STUpd" id="ddlALPO1STUpd" class="form-control" disabled="disabled">
     <option value="0">--Select--</option>
     <option value="Base">Base</option>
    <option selected="selected" value="Primary">Primary</option>
   <option value="Additional">Additional</option></select>

问题原因 #

传入resetSelectElement函数的selectElement是jQuery对象，而selectedIndex是原生DOM元素的属性，jQuery对象没有这个属性，直接赋值不会生效。

解决方法 #

有两种可行的修改方式：

方式一：将jQuery对象转为原生DOM元素 #

修改重置函数，通过索引或get()方法获取原生元素后设置selectedIndex：

function resetSelectElement(selectElement) {
    // 方式1：通过索引获取原生元素
    selectElement[0].selectedIndex = 0;
    // 或者方式2：使用get()方法
    // selectElement.get(0).selectedIndex = 0;
}

方式二：使用jQuery的val()方法设置值 #

直接利用jQuery的val()方法将下拉框的值设为0，可以简化代码，甚至不需要单独的重置函数：

if (varALPO1MobNum == "0") {                    
    var selectElement = $('#ddlALPO1STUpd');
    selectElement.val('0'); // 直接用val()设置目标值
    selectElement.attr('disabled', 'disabled');
} else {
    $('#ddlALPO1STUpd').removeAttr('disabled');
}

额外优化：禁用/启用元素时，jQuery推荐使用prop()方法替代attr()，因为disabled是元素的属性（property）而非HTML属性（attribute），修改后代码更严谨：

if (varALPO1MobNum == "0") {                    
    var selectElement = $('#ddlALPO1STUpd');
    selectElement.val('0');
    selectElement.prop('disabled', true);
} else {
    $('#ddlALPO1STUpd').prop('disabled', false);
}

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