jQuery替换hide和show with detach / append not working

Question

我不希望任何内容加载，并且只希望在选择选项值时加载内容，我尝试使用detach替换hide并使用append显示，但无法使其正常工作。

我将有大约50个项目可供选择，我不希望所有内容加载并减慢加载时间，所以我只希望每个div内容显示为我选择它们。

每个模块的内容都是来自主机的数据的快捷方式。

$(document).ready(function () {
        $('.module_container').hide();
        $('#Moduleselect').change(function () {
            $('.module_container').hide();
            $('#'+$(this).val()).show();
        });
    });



<select id="Moduleselect">
  <option value="">Select Module</option>
  <option value="selectmodule_1">Module Name</option>
  <option value="selectmodule_2">Module Name</option>
  <option value="selectmodule_3">Module Name</option>
  <option value="selectmodule_4">Module Name</option>
</select>
    <div id="selectmodule_1" class="module_container"><module name="ALL_MY_LEAGUES"/></div>
    <div id="selectmodule_2" class="module_container"><module name="LAST_WEEKS_FANTASY_RESULTS"/></div>
    <div id="selectmodule_3" class="module_container"><module name="FANTASY_ARTICLES"/></div>
    <div id="selectmodule_4" class="module_container"><module name="DRAFT_STATUS"/></div>