jQuery Dialog打开时DOM修改操作立即被重置的原因与解决方案

jQuery.load()是异步AJAX方法，调用后不会等待页面内容加载插入完成就会继续执行后续代码。你当前的写法是发起load请求后立刻执行setDialogType，此时目标select元素还没被加载到对话框DOM中，等load请求完成后，返回的页面内容会直接覆盖对话框内的节点，你之前做的所有DOM修改自然会被重置。
另外原代码未实现select禁用的逻辑，修复时可以一并补上。

把所有针对加载内容的DOM操作放到load方法的完成回调里，等内容真正插入DOM后再执行，同时建议限定元素查找范围，避免误选页面其他位置的同名类元素。

最简实现（直接选中对应选项+禁用） #

因为被加载的页面里已经预置了三个选项，不需要清空重加，直接赋值选中即可，代码更简洁：

function dialog(type) {
    $(".dialog").dialog({
      resizable: true,
      height: "auto",
      width: 800,
      modal: true,
      open: function () {
        const $currentDialog = $(this);
        // 传入load完成回调，内容加载完毕后再执行DOM修改
        $currentDialog.load("../SearchPage/search_page.jsp", function () {
          const $select = $currentDialog.find(".selectbox");
          // 匹配参数和选项值
          const optionMap = {
            race: "Race",
            class: "Class",
            background: "Background"
          };
          if (optionMap[type]) {
            $select.val(optionMap[type]);
            // 禁用下拉框
            $select.prop("disabled", true);
          }
        });
      }, 
    });    
}

保留原有清空重加选项逻辑的实现 #

如果要保留原setDialogType清空下拉框、仅保留目标选项的逻辑，建议给方法增加上下文参数，避免全局查找元素误改页面其他节点：

function dialog(type) {
    $(".dialog").dialog({
      resizable: true,
      height: "auto",
      width: 800,
      modal: true,
      open: function () {
        const $currentDialog = $(this);
        $currentDialog.load("../SearchPage/search_page.jsp", function () {
          // 传入当前对话框作为查找上下文
          setDialogType(type, $currentDialog);
          $currentDialog.find(".selectbox").prop("disabled", true);
        });
      }, 
    });    
} 

function setDialogType(type, $context) {
    // 优先在指定上下文内查找select，找不到再走全局查找兼容旧逻辑
    const $select = $context ? $context.find(".selectbox") : $(".selectbox");
    $select.empty();
    switch(type) {
        case "race":
            $select.append('<option value="Race">Race</option>');
            break;
        case "class":
            $select.append('<option value="Class">Class</option>');
            break;
        case "background":
            $select.append('<option value="Background">Background</option>');
            break;
    }   
}

核心注意点：所有通过AJAX异步加载的内容，DOM操作必须放在加载完成的回调里执行，提前操作要么找不到目标节点，要么修改会被后续加载的内容覆盖。

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