Moodle加载jQuery代码报Uncaught SyntaxError错误如何解决

触发SyntaxError的直接原因 #

你提交的JS代码中console.log('ok);缺少闭合的单引号，字符串必须成对使用引号包裹，缺失右引号会被浏览器识别为无效符号，直接抛出语法错误。修复只需补全单引号即可：console.log('ok');。

其他隐藏问题 #

语法修复后代码还会存在运行异常，需要同步修改以下问题：

• 你用var search = $('#search').text()拿到的是option标签的文本字符串，字符串类型不能绑定点击事件，需要保留jQuery对象，去掉.text()调用，修改为var search = $('#search');
• HTML中循环输出多个option时全部复用了id="search"，同一页面内id属性必须唯一，重复id会导致jQuery只能匹配到第一个元素。如果要给所有option绑定事件，建议将id改为class属性class="search"，选择器同步改为$('.search')；更合理的做法是直接给select标签绑定change事件监听选择操作，不需要给每个option单独绑定事件。

优化后可运行代码示例 #

修正后的HTML代码 #

<h1 id="ciao">
  <?php echo $COURSE->fullname ?>
</h1>

<a id="marko" href="report2.php">PDF</a>
<form action="manage.php" method="POST">
  <select name="ciao" id="courseSelect">
    <?php foreach ($result as $key => $res) { ?>
      <option value="search" name="search">
        <?php echo $res->uename ?>
      </option>
    <?php } ?>
  </select>
</form>

修正后的JS代码 #

function init() {
  // 监听下拉框选择事件
  $('#courseSelect').change(function() {
    // 可按需获取选中值/文本
    const selectedValue = $(this).val();
    const selectedText = $(this).find('option:selected').text();
    // 放开注释即可使用ajax逻辑
    /*
    $.ajax({
        type: 'post',
        url: 'manage.php',
        data: {
            source1: "some text",
            source2: "some text 2"
        },
        success: function( data ) {
            console.log( data );
        }
    });
    */
    console.log('ok');
  });
}
$(document).ready(init);

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