jQuery如何给下拉选中项左侧加当前标识 页面加载时默认标记选中项

修改后的完整代码 #

JavaScript 代码 #

// 封装标识更新逻辑，避免重复编写代码
function updateSelectedOption($select) {
    // 先清除所有选项的旧标识
    $select.find("option").each(function(){
        const originalText = jQuery(this).text().replace(/^current:\s*/, '');
        jQuery(this).text(originalText);
    });
    // 给当前选中项添加左侧标识
    const $selectedOpt = $select.find('option:selected');
    const selectedText = $selectedOpt.text();
    $selectedOpt.text(`current: ${selectedText}`);
}

jQuery(function(){
    // 页面加载完成后，直接给默认选中项添加标识
    const $select = jQuery('.getcatdishes');
    updateSelectedOption($select);
    
    // 绑定change事件，切换选项时同步更新标识
    $select.change(function(){
        updateSelectedOption(jQuery(this));
    });
});

配套HTML（如需指定默认选中项，可给对应option加selected属性） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="getcatdishes">
<option selected>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>

核心改动说明 #

• 调整标识位置：将原本追加到文本右侧的(current)，改为在选中项文本前拼接current: 前缀，完全符合「current:option 1」的展示要求
• 实现页面加载自动加标识：把标识更新逻辑封装为公共函数，DOM加载完成后直接调用该函数，默认选中的选项会自动生成标识，不需要等待用户触发change事件
• 优化旧标识清除逻辑：用正则匹配所有选项开头的current: 前缀统一清除，避免出现标识残留、重复拼接的问题

内容的提问来源于stack exchange，提问作者Mr. brick