HTML侧边栏与下拉菜单刷新JS函数语法错误排查求助

你遇到的Uncaught SyntaxError: Invalid or unexpected token错误，根源是JavaScript中用双引号/单引号包裹的字符串不允许直接换行。你在refreshCCP函数里给$("#side_panel").html()传入的HTML内容直接拆分成了多行，违反了JS的字符串语法规则。

修复方案 #

方法1：使用ES6模板字符串（推荐）

用反引号（`）包裹多行字符串，支持直接换行，代码可读性更高：

$("#side_panel").html(`<h1 class='text-center'>Search Panel</h1>
<select id='filter' class='form-control'>
<option value='All'>All CCP</option>
<option value='ex1'>ex1 CCP</option>
<option value='ex2'>ex2 CCP</option>
</select>`);

方法2：用加号拼接多行字符串

如果不想用模板字符串，可将每行字符串用+连接：

$("#side_panel").html("<h1 class='text-center'>Search Panel</h1>" +
"<select id='filter' class='form-control'>" +
"<option value='All'>All CCP</option>" +
"<option value='ex1'>ex1 CCP</option>" +
"<option value='ex2'>ex2 CCP</option>" +
"</select>");

额外优化点 #

• 代码中重复引入了两个版本的jQuery，建议只保留其中一个，避免潜在冲突。
• 初始HTML里的<div id="side_panel" class="col-md-3"> // 中的//是无效注释，应改为<!-- -->格式，否则会被当作页面内容渲染。

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