我在 Ajax 调用中得到结果,但填充的 select
元素未以 Material 样式呈现,仅在选择浏览器默认中呈现。我已经尝试过在 $('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的标签。
编辑:
这是我的控制台输出:
最佳答案
控制台显示此错误:
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/js/materialize.min.js">
现在您应该不再在控制台中收到该错误。然后您可以继续正确下载该文件(不要打开它),将其复制到 js
文件夹,然后放入您的src
归因回原来的样子。
解决控制台错误后,您仍然需要创建 select
元素正确渲染。之后$.each
循环结束,执行 $unit.material_select();
。这应该使元素根据需要呈现。
关于javascript - 选择未在 Material 设计中呈现 - 意外标记 `<`,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46246247/