带有MaterializeCSS的Rails除了生成"select“之外，还会生成"input”，这使得动态加载变得不可能

Question

我正在使用带有Slim-lang和MaterializeCSS的Rails 5.2.0

我使用javascript动态填充select下拉列表，如here所示。

代码在select元素被正确填充的意义上工作。但是，屏幕上显示的组合列表并未填充！在Chrome浏览器中查看html输出时，我发现"select“实际上由以下部分组成：

<input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-f6b96705-f301-b1b9-c113-84ee91f6897a">
<ul id="select-options-f6b96705-f301-b1b9-c113-84ee91f6897a" class="dropdown-content select-dropdown" tabindex="0" style="">
</ul>
<select id="crit_type" name="crit_type" onchange="loadCritValues(this.value)" tabindex="-1"><option value="Select Criteria">Select Criteria</option>
  <option value="age_group">age_group</option>
  <option value="gender">gender</option>
  <option value="current_country">current_country</option>
  <option value="home_country">home_country</option>
  <option value="first_language">first_language</option>
</select>

如您所见，select选项已正确填充。但事实证明，"input“和"ul”元素决定了屏幕上显示的内容。而"ul“自然是空的。

除了必须修改"ul“内容之外，还有什么方法可以解决这个问题吗？

Answer 1

事实证明，我在使用select时遇到的问题与MaterializeCSS有关。它生成的HTML是按照我提到的格式构造的，如下所示：

https://materializecss.com/select.html

我可以通过将'browser-default‘类分配给select标记来覆盖该行为：

选择id="crit_type“name="crit_type”onchange="loadCritValues()“class="browser-default”=options_for_select(@crit_types)

这将只提供select标签，而没有额外的html元素，并允许我使用javascript来操作select。