使用jQuery加载外部HTML为选项，首个选项选中后无法在div展示的求助

问题场景 #

需要将h12_load.html中的元素加载到id为SelectionList的下拉列表，选中选项时将对应元素显示到id为divResult的容器中，但当前第一个选项选中后无法正常添加内容到divResult。

原代码 #

HTML & jQuery #

<select name="" id="SelectionList">
    <option value="" id="option1"></option>
    <option value="" id="option2"></option>
</select>
<div id="divResult"></div>
<script>
    $(document).ready(() => {
        let option1 = $('#option1').append().load('h12_load.html #content')
        let option2 = $('#option2').append().load('h12_load.html #meerContent')
        $('#SelectionList').on('change', function () {
            if ($('#option1').is(':selected')) {
                $('#divResult').append(option1)
            } if ($('#option2').is(':selected')) {
                $('#divResult').append(option2)
            }

        }

        )
    })
</script>

外部HTML文件（h12_load.html） #

<div id="content">
    <h2>Deze inhoud wordt geladen via $.load()</h2>
</div>
<div id="meerContent">
    <p>Lorem ipsum dolor sit....</p>
</div>

问题分析 #

1. HTML规范冲突：<option>标签仅支持文本内容，直接用load()将<div>等块级元素加载到<option>内，浏览器会自动剥离这些无效元素，导致内容无法正确绑定。
2. 异步操作处理错误：load()是异步方法，直接将返回的jQuery对象赋值给变量时，变量并未包含加载完成后的实际内容，后续的append操作自然无法生效。
3. 逻辑冗余：通过判断选项ID来处理选中事件，代码冗余且可维护性差。

修正后的代码 #

HTML & jQuery #

<select name="" id="SelectionList">
    <option value="#content" id="option1">加载内容1</option>
    <option value="#meerContent" id="option2">加载内容2</option>
</select>
<div id="divResult"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(() => {
    // 预加载外部HTML内容，避免重复请求
    let externalContent;
    $.get('h12_load.html', function(data) {
        externalContent = $(data);
        // 可选：将外部内容的文本同步到选项显示
        $('#option1').text(externalContent.find('#content h2').text());
        $('#option2').text(externalContent.find('#meerContent p').text());
    });

    // 监听下拉框选中事件
    $('#SelectionList').on('change', function () {
        const targetSelector = $(this).val();
        if (externalContent && targetSelector) {
            // 清空容器并插入克隆的目标元素
            $('#divResult').empty().append(externalContent.find(targetSelector).clone());
        }
    });
});
</script>

修正说明 #

• 用$.get()预加载整个外部HTML文件，将内容存入变量externalContent，避免重复发起请求。
• 利用下拉框选项的value属性关联外部元素的选择器，简化选中判断逻辑。
• 选中选项时，从预加载的内容中克隆对应元素并插入到divResult，确保内容可以重复显示且不破坏原预加载内容。
• 可选：将外部内容的文本同步到选项的显示文本，让用户更清楚选项对应的内容。

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