如何在JavaScript中根据多选下拉框选择生成格式化标签

原代码存在的问题 #

• 下拉框选项的value是显示文本（如"Bold"），而非实际HTML标签名，会导致生成<Bold>这类无效标签
• 重复赋值selectedtag变量，属于冗余代码
• document.createElement()用法错误：该方法仅接受单个标签名（如'b'），无法传入完整标签字符串（如<b></b>）
• 循环逻辑生成的是独立标签，而非需求中的嵌套标签结构

修正后的实现代码 #

HTML部分（修正选项value为对应HTML标签名）

<select id="multiple-select" multiple>
    <option value="b">Bold</option>
    <option value="i">Italics</option>
    <option value="u">Underline</option>    
</select>
<button id="Apply">Apply</button>
<!-- 用于展示生成的标签字符串 -->
<div id="tag-result"></div>

JavaScript部分（生成嵌套标签字符串）

$("#Apply").click(function(){
    // 获取选中的标签名数组，若无选中则返回空数组
    const selectedTags = $("#multiple-select").val() || [];
    if (selectedTags.length === 0) return;

    // 拼接开始标签（按选择顺序）
    const openTags = selectedTags.map(tag => `<${tag}>`).join('');
    // 拼接结束标签（逆序，保证嵌套结构正确）
    const closeTags = [...selectedTags].reverse().map(tag => `</${tag}>`).join('');

    // 组合成完整的嵌套标签字符串
    const fullTagString = openTags + closeTags;

    // 将结果展示到页面
    $("#tag-result").text(fullTagString);
});

若需生成实际DOM元素（而非字符串） #

如果需要创建可插入页面的嵌套DOM节点，可改用以下逻辑：

$("#Apply").click(function(){
    const selectedTags = $("#multiple-select").val() || [];
    if (selectedTags.length === 0) return;

    // 初始化最内层内容（这里用空文本节点，可替换为需要包裹的文本/元素）
    let currentNode = document.createTextNode('');
    // 逆序遍历标签，从内到外包裹元素
    for (let i = selectedTags.length - 1; i >= 0; i--) {
        const tagName = selectedTags[i];
        const wrapper = document.createElement(tagName);
        wrapper.appendChild(currentNode);
        currentNode = wrapper;
    }

    // 将生成的嵌套元素插入页面
    document.body.appendChild(currentNode);
});

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