如何在页面加载后获取Dropdown选中值并触发其onChange事件？

我来帮你解决这两个问题，先拆解下问题根源：

你在someFunction里重新生成了整个<select>元素，虽然用事件委托绑定了change事件，但有两个核心问题：

1. 页面加载完成后你没有主动去获取新生成下拉框的选中值；
2. 代码预设的选中状态不会自动触发change事件——浏览器只在用户手动修改选择时才会触发这个事件，代码设置的选中项不会触发。

修改后的代码方案 #

基于你的现有代码调整，直接解决两个问题：

$(document).ready(function () {
    // 页面加载时执行业务逻辑
    someFunction();

    // 用事件委托绑定下拉框的change事件
    $(document).on('change', '#myDropdown', function() {
        localStorage.setItem('selected_val', $(this).val());
        alert($(this).val());
    });

    function someFunction(){
        var mycondition = "true"; // 这里替换成你的实际业务逻辑判断
        var htmlVar = "";
        
        if(mycondition == 'true'){
            htmlVar = '<select id="myDropdown" class="check">'+ 
                '<option value="one">one</option>'+ 
                '<option value="two">two</option>'+ 
                '<option selected="selected" value="three">three</option>'+ 
                '<option value="four">four</option>'+ 
                '</select>';
        } else {
            // 补充默认下拉框结构，避免条件不满足时页面无内容
            htmlVar = '<select id="myDropdown" class="check">'+ 
                '<option value="one">one</option>'+ 
                '<option value="two">two</option>'+ 
                '<option value="three">three</option>'+ 
                '<option value="four">four</option>'+ 
                '</select>';
        }
        
        $("#outerDiv").empty().append(htmlVar);
        
        // 解决问题1：主动获取页面加载后的选中值
        var loadedSelectedVal = $('#myDropdown').val();
        console.log('页面加载完成，当前选中值：', loadedSelectedVal);
        
        // 解决问题2：手动触发change事件，执行绑定的业务逻辑
        $('#myDropdown').trigger('change');
    }
});

关键修改说明 #

• 在生成并插入新的下拉框后，主动调用$('#myDropdown').val()获取选中值，解决页面加载后拿不到值的问题；
• 通过$('#myDropdown').trigger('change')手动触发change事件，让代码预设的选中值也能执行你绑定的localStorage存储和弹窗逻辑，满足页面加载时自动弹出"three"的需求；
• 补充了else分支，避免业务条件不满足时页面没有下拉框，提升代码健壮性。

更轻量的优化方案（如果不需要重新生成下拉框） #

如果你的业务逻辑只是需要修改选中项，不需要重新渲染整个下拉框，可以用更高效的方式：

function someFunction(){
    var mycondition = "true";
    if(mycondition == 'true'){
        // 直接修改现有下拉框的选中值
        $('#myDropdown').val('three');
        // 手动触发change事件
        $('#myDropdown').trigger('change');
    }
}

这种方式不用重新生成DOM元素，性能更好，适合不需要更新下拉框选项列表的场景。

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