<select> 项目未使用 Jquery 加载答案

【问题标题】：<select> items not loading using Jquery<select> 项目未使用 Jquery 加载
【发布时间】：2021-11-15 12:01:19
【问题描述】：

我的问题可能看起来非常简单，但我正在努力如何使用 Jquery 将项目加载到选择中。我正在使用这里找到的 Materialize 主题：https://pixinvent.com/materialize-material-design-admin-template/html/ltr/vertical-modern-menu-template/

我有这个。简单：

  <div class="input-field col s12">
    <select id="selectid">
      <option value="" disabled selected>Choose your option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <label>Materialize Select</label>
  </div>

  @section Scripts{
     <script src="~/app-assets/js/vendors.min.js"></script>
     <script src="~/app-assets/js/plugins.js"></script>
     <script src="~/app-assets/js/search.js"></script>
     <script src="~/app-assets/js/custom/custom-script.js"></script>
      <script>

        $( document ).ready(function() {
            $('#selectid').append(`<option value="${"10"}">${"test1"}</option>`);
            $('#selectid').append(`<option value="${"11"}">${"test2"}</option>`);
            $('#selectid').append(`<option value="${"12"}">${"test3"}</option>`);
        });

      </script>
  }

我的问题是我的附加项目不起作用：

但是，如果我将附加代码移到 $( document ).ready() 之外，它就可以工作。但我试图在页面加载时将它们加载到其中。

为什么这不起作用？我该如何解决？

【问题讨论】：

在纯 html 中使用它似乎对我来说工作正常：pastecode.io/s/zqg3wkyi 是否有任何控制台错误？另外，我没有在其中看到对 jquery 的引用，它是否在布局文件中并确认加载正常？

标签： javascript jquery asp.net-core materialize

【解决方案1】：

这有很多原因。但最常见的是您的代码与其他 js 或 jquery 代码之间的冲突 - 所以只需在 在您的 document.ready() 函数上方添加这一行，以 无冲突模式 运行您的代码强> 阻止。

$.noConflict();

然后用 jQuery 替换代码中的所有 jQuery 快捷方式 $。

或者对于较短的版本：

var jq = $.noConflict();

并用 jq 替换代码中的所有 jQuery 快捷方式 $。

【讨论】：

【解决方案2】：

这是 Materialize 的 official sample 的工作演示。您可以将附加代码放在初始化代码之前。

<div class="input-field col s12">
    <select id="selectid">
        <option value="" disabled selected>Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <label>Materialize Select</label>
</div>
@section Scripts{
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#selectid').append(`<option value="${"10"}">${"test1"}</option>`);
            $('#selectid').append(`<option value="${"11"}">${"test2"}</option>`);
            $('#selectid').append(`<option value="${"12"}">${"test3"}</option>`);
            $('#selectid').formSelect();
        });
       
    </script>
}

结果：

【讨论】：