不使用onchange/onclick触发JS函数获取select选中option文本的方法

方案1：服务端直接初始化赋值（最稳定，完全不依赖前端事件） #

你在PHP渲染页面的时候，本身就知道下拉框的默认选中项对应文本，直接给隐藏域赋值即可，完全不需要等待前端交互或JS执行：

<div class="col-md-6">
    <div class="form-group">
        <label class="control-label" style="padding-top: 5px;">Job Category</label>
        <select name="j_cate" id='job_cate' class="form-control">
            <option> </option>
            <?php 
            // 假设你已经有默认选中的分类id $default_selected_id
            foreach ($j_categories as $j_category) { 
                $selected = $j_category->id == $default_selected_id ? 'selected' : '';
                // 同时记录默认选中的文本
                if($selected) $default_cate_text = $j_category->jobCat;
            ?>
            <option value="<?php echo $j_category->id; ?>" <?php echo $selected; ?> > <?php echo $j_category->jobCat; ?> </option>
            <?php } ?>
        </select>
        <!-- 直接输出默认文本到隐藏域 -->
        <input type="hidden" value="<?php echo $default_cate_text ?? ''; ?>" id="my_hidden_field" name="my_hidden_field" />
    </div>
</div>

这个方案从根源避免了前端赋值的时序问题，哪怕用户禁用JS，隐藏域也有正确的初始值。

方案2：前端页面加载完成后自动执行赋值逻辑 #

如果你不方便在PHP侧处理，可以让JS在DOM加载完成后自动执行一次赋值逻辑，同时兼容用户手动修改的场景：

// 封装成通用函数，方便多处调用
function updateCateHidden() {
    const selectedText = $("#job_cate option:selected").text();
    $("#my_hidden_field").val(selectedText);
}

// DOM加载完成后自动执行一次，初始化隐藏域值
$(document).ready(function() {
    updateCateHidden();
    // 绑定下拉框变更事件，用户手动选择时自动更新
    $("#job_cate").on('change', updateCateHidden);
});

如果你的业务里有其他JS逻辑会动态修改下拉框的选中值，只需要在修改完成后手动调用一次updateCateHidden()即可同步隐藏域的值，不需要依赖用户交互。

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