无法在 liquid-html 元素中设置属性 size=""

Question

我正在将动态项目传递给 select> 选项以制作一个列表 select 可以包含项目并且我还想显示 "list" 内联（没有下拉列表)，为此我做了接下来的事情：

这是我的液体代码

<select class="pattern-select single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
  {% for value in option.values %}
      <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
  {% endfor %}
</select>

这是我正在使用的 css

.pattern-select {
    display: inline-block;
    height: 3em;    
    -webkit-appearance: none;
    -moz-appearance: none;
}

.pattern-select option{
    display: inline-block;
    width: 2.5em;
    height: 2.5em;
    float:left;
}

我只需要在 <select... 中添加 size="3" 作为属性来结束该功能，但是当我手动放置时， size="3" 没有被处理，就好像该属性尚未设置，因此我无法显示 select>内联选项结构。

这是我的 html 输出的样子：

<select class="pattern-select single-option-selector single-option-selector-product-template product-form__input" id="SingleOptionSelector-0" data-index="option1">
   <option value="S" selected="selected">S</option>
   <option value="M">M</option>
   <option value="L">L</option>
   <option value="XL">XL</option>
</select>

有什么建议吗？

干杯！

Answer 1

最后因为我不能再扩展这个问题了，我得到了 <select> id 并通过 javascript 传递它属性 size perse:

document.getElementById("SingleOptionSelector-0").size = "3";

无法在 liquid-html 元素中设置属性 size=""

Can't set attribute size="" in liquid-html element

html

javascript

sass

liquid