Materialise CSS - Select 在 DOM 中没有名称或适当的值

Question

我无法理解 materialize CSS <select> 标签的工作原理。

在常规 HTML select 标签中，您将插入一个 name="" 属性，并为每个选项插入一个 value="" 属性，这似乎在实现 CSS.

此代码：

<div class="input-field col s12">
  <select>
    <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>

在 DOM 中呈现：

<div class="input-field col s12 m6">
  <div class="select-wrapper"><span class="caret">▼</span>
    <input class="select-dropdown" readonly="true" data-activates="select-options-273ec07d-e7c4-e689-e2e3-6a57ff2f6293" value="Choose your option" type="text">
    <ul style="width: 296px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;" id="select-options-273ec07d-e7c4-e689-e2e3-6a57ff2f6293" class="dropdown-content select-dropdown">
      <li class="disabled"><span>Choose your option</span></li><li class="active selected"><span>Option 1</span></li><li class=""><span>Option 2</span></li>
      <li class=""><span>Option 3</span></li>
    </ul>
    <select class="initialized">
          <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>
  </div>
  <label>Materialize Select</label>
</div>

我遇到的问题：

在哪里以及如何设置 select 元素的名称（在呈现的 input 元素中相应地表示）？
值是列表中显示的文本。我希望具有与显示字符串不同的值，例如：

<option value="1">regular style</option> <option value="2">bold style</option> <option value="3">italic style</option>

提前致谢:)

Answer 1

Materialize 像大多数其他库一样处理 <select> 替换；遵循标准 HTML 约定，例如 name="foo" 或 <option value="A">But I'm showing other text here</option>.

在创建更漂亮、更实用的表单时，输出将考虑这些因素。

注意：Materialize CSS 文档确实显示 <select> 标签但没有大多数常见元素（如 name=""），但是我认为这更多是为了尽可能呈现最干净、最少的代码。

Answer 2

让我向您展示一个将名称添加到实体化的示例 css select

如果您的 html 表示此

<div class="col s3">
    <span class="required"></span>
    <select id="piezas" name="piezas" class="validate">
        <option value="-1" disabled selected>Elija Pieza</option>
        <option value="1">Tornillo</option>
        <option value="2">Clavo</option>
        <option value="3">Cable</option>
    </select>
</div>

您的 select 将被转换并在 dom 中显示为这样的东西

<div class="col s3">
    <span class="required"></span>
    <div class="select-wrapper valid">
        
        <input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-9e9993fe-936f-86eb-22f5-ec638cf0121d" name="piezas-materialize" aria-invalid="false">
        
        <ul id="select-options-9e9993fe-936f-86eb-22f5-ec638cf0121d" class="dropdown-content select-dropdown" tabindex="0">
            <li class="disabled selected" id="select-options-9e9993fe-936f-86eb-22f5-ec638cf0121d0" tabindex="0">
                <span>Elija Pieza</span>
            </li>
            <li id="select-options-9e9993fe-936f-86eb-22f5-ec638cf0121d1" tabindex="0">
                <span>Tornillo</span>
            </li>
            <li id="select-options-9e9993fe-936f-86eb-22f5-ec638cf0121d2" tabindex="0">
                <span>Clavo</span></li>
            <li id="select-options-9e9993fe-936f-86eb-22f5-ec638cf0121d3" tabindex="0">
                <span>Cable</span>
            </li>
        </ul>

        <svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
            <path d="M7 10l5 5 5-5z"></path><path d="M0 0h24v24H0z" fill="none"></path>
        </svg>

        <select id="piezas" name="piezas" class="validate ignore" tabindex="-1">
            <option value="-1" disabled="" selected="">Elija Pieza</option>
            <option value="1">Tornillo</option>
            <option value="2">Clavo</option>
            <option value="3">Cable</option>
        </select>
    </div>
</div>

要为此 select 添加名称，请使用以下 JavaScript 代码迭代所有这些名称并添加自定义名称。请记住，您需要为名称添加后缀以避免在许多 selects

上使用相同的名称

    let allSelects = $('.select-dropdown.dropdown-trigger');    
    for (i = 0; i < allSelects .length; i++) {
        let item = $(allSelects[i]);
        let name= item.parent().children()[3].name;
        item.attr("name", name + '-materialize');  // change -materialize for the sufix you like  
    }

Materialise CSS - Select 在 DOM 中没有名称或适当的值

Materialize CSS - Select does not have name nor proper value in DOM

html

javascript

css

materialize