Question

我正在将项目直接传递给select>选项，以使列表可以与项目一起选择，而且我想显示内联的“列表”（不包含下拉菜单），要做的是接下来的事情：

这是我的液体代码

<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;
}

我只需要在size="3"中将<select...作为属性添加到该函数结尾，但是当我手动放置它时，size="3"不会被处理，就像该属性一样尚未设置，因此无法内嵌显示select> option结构。

这是我的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将其传递给属性大小本身：

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

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

1 个答案: