如何在 Rail 5 中使用 Materialize 和 SimpleForm 将 CSS class 应用到 Select

Question

我在使用带有 Select 输入的 SimpleForm 和 Materialize 让 class 停留在正确位置时遇到了一些麻烦。

此 gem (https://github.com/jamesfwz/materialize-form) 中的 Materialise 简单形式包装器适用于大多数字段，但如果我想要一个字段加载无效 class Select 字段，我做对不了

这是一个使用文本字段的工作示例。在我看来：

<%= f.input :suburb,  input_html: {class: "invalid"} %>

输出：

<div class="input-field col string optional">
  <input class="string optional invalid" type="text" ....>Suburb</label></div>

正确显示其无效格式。

当我尝试使用 select 输入时，我无法在正确的位置输入 class。 IE。它使用 js 创建的相关 Materialize 文本输入。

在我看来使用 wrapper_html 选项：

<%= f.input :state,              
        collection: ["VIC","NSW","TAS","SA","ACT","WA"], 
        wrapper_html: { class: 'invalid' }

将 class 放在外包装上，而不是可见的文本元素：

<div class="input-field col select optional invalid">
  <div class="select-wrapper">
    <input class="select-dropdown dropdown-trigger" type="text" readonly="true">
      <ul id="select-..." class="dropdown-content select-dropdown" tabindex="0">
        <li id="select-options-..." tabindex="0" class="selected"><span>

显示不正确。

我试过 input_html 选项；

<%= f.input :state,              
        collection: ["VIC","NSW","TAS","SA","ACT","WA"], 
        input_html: { class: 'invalid' }

将 class 放在 Select 元素上，而不是可见文本元素上

<div class="input-field col select optional ">
  <div class="select-wrapper">
    <input class="select-dropdown dropdown-trigger" type="text" readonly="true">
       <ul id="select-options-..." class="dropdown-content select-dropdown" tabindex="0">
         <li ...</li></ul>
           <select class="select optional invalid" name="...">
             <option value=""></option>

我试过直接 class 选项；

<%= f.input :state,              
        collection: ["VIC","NSW","TAS","SA","ACT","WA"], 
        class: 'invalid'

没有 class 出现在任何地方（不出所料）

最后，我尝试了 html_options 选项，希望它能传递给 collection_select 方法并被 Materialize

接收

<%= f.input :state,              
        collection: ["VIC","NSW","TAS","SA","ACT","WA"], 
        class: 'invalid'

其中没有 class 出现在任何地方（更不足为奇！）

我哪里错了？

Answer 1

你可以使用option_for_select

invalid_value = "NSW"
values = ["VIC","NSW","TAS","SA","ACT","WA"].map { |v| v == invalid_value ? [v, class: 'invalid'] : v  }
=> ["VIC", ["NSW", {:class=>"invalid"}], "TAS", "SA", "ACT", "WA"]

然后

<%= f.select :state, options_for_select(values, invalid_value), include_blank: true %>

编辑：

添加 class 到 Materialise 生成的 select

<%= form.input :state, collection:  ["VIC","NSW","TAS","SA","ACT","WA"], input_html: { class: "invalid" } %>

添加添加一些 JS
这应该运行在 Materialize 下拉列表生成后

$('select.invalid').each(function(){
  $(this).parent().addClass('invalid')
})

如何在 Rail 5 中使用 Materialize 和 SimpleForm 将 CSS class 应用到 Select

How to apply a CSS class to a Select using Materialize and SimpleForm in Rail 5

ruby-on-rails

materialize