选择未在材料设计中呈现 - 意外标记`<`答案

【问题标题】：Select not rendered in material design - Unexpected token `<`选择未在材料设计中呈现 - 意外标记`<`
【发布时间】：2017-09-15 19:20:26
【问题描述】：

我在我的 Ajax 调用中得到了结果，但填充的 select 元素没有以材质样式呈现，仅在选择浏览器默认值中呈现。我已经在$('select').material_select();、$.each、$.append 和成功函数上尝试了各种形式的渲染我的函数，但没有结果。

模板方面。

  <div class="input-field col s12">
   <select id="getUnit" ></select>
   <label>Units</label>
  </div>

Ajax Jquery 获取。

$(function () {
  //request the JSON data and parse into the select element
  $.ajax({
    type: "GET",
    url: '/product/unit-measurement-search',
    success: function (unitMeasurement) {
      //get a reference to the select element
      $unit = $('#getUnit');
      //clear the current content of the select
      $unit.html('');
      //iterate over the data and append a select option
      $.each(unitMeasurement, function (info, unitSearch) {
        $unit.append('<option id="' + unitSearch.descriptionUnitMeasurement + '">' + unitSearch.descriptionUnitMeasurement + '</option>');
      });
    }
  });
});

后端进程请求json。

router.get('/product/unit-measurement-search', function (req, res) {
  connection.query('SELECT 
   acronymUnitMeasurement,descriptionUnitMeasurement FROM unit_measurement',
   function (err, unitMeasurement, fields) {
     if (err) {
       throw err;
     }
     res.send(unitMeasurement);
   }
  );
});

前端模板中的return只显示select的label。

编辑：

这是我的控制台输出：

【问题讨论】：

你在哪里选择选择？是 $unit 吗？
$.each 完成后，执行$unit.material_select();。应该这样做。
@epascarello yesss
@trincot 未加载：c 检查我的控制台错误i.imgur.com/JXLU0Oy.png
从图像看来，您没有正确包含 Materialize。可以包含包含 jQuery 和 Materialize 的 HTML 吗？

标签： javascript jquery ajax materialize

【解决方案1】：

控制台显示此错误：

Uncaught SyntaxError: Unexpected token < materialize.js:1

...您加载的另一个 modal.js 脚本也出现同样的错误。

这表明脚本文件已损坏。可能是保存不正确。也许当您下载它时，您在浏览器中将其作为网页打开，并将该页面以 HTML 编码保存到最终位置。或者还发生了其他事情。

要验证它是否适用于正确的脚本文件，请将您的脚本标签替换为：

<script type="text/javascript" src="js/materialize.min.js">

到：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/j‌s/materialize.min.js">

现在您应该不会再在控制台中看到该错误。然后您可以继续正确下载该文件（不要打开它），将其复制到js 文件夹，然后将您的src 属性恢复为原来的状态。

控制台错误解决后，您仍然需要正确渲染select 元素。在$.each 循环完成后，执行$unit.material_select();。这应该使元素按需要呈现。

【讨论】：