0

我用这个覆盖选项模板：

  const optionTemplates = {
    option:
      `<div class="{{data.classes.option.option}}" data-element="option.option">
        <label for="{{data.selectId}}" class="{{data.classes.option.label}} {{#data.onlyOption}}{{data.classes.option.hiddenLabel}}{{/data.onlyOption}}" data-element="option.label">{{data.name}}</label>
          <div class="{{data.classes.option.wrapper}}" data-element="option.wrapper">
          <select id="{{data.selectId}}" class="{{data.classes.option.select}}" name="{{data.name}}" data-element="option.select">
            <option disabled selected>Select {{data.name}}</option>
            {{#data.values}}
              <option value="{{name}}">{{name}}</option>
            {{/data.values}}
          </select>
          <svg class="{{data.classes.option.selectIcon}}" data-element="option.selectIcon" viewBox="0 0 24 24"><path d="M21 5.176l-9.086 9.353L3 5.176.686 7.647 12 19.382 23.314 7.647 21 5.176z"></path></svg>
        </div>
      </div>`,
  };

我只是复制了默认模板并添加了以下 2 个自定义项：

  • 添加了占位符选项<option disabled selected>Select a {{data.name}}</option>
  • {{#selected}}selected{{/selected}}从默认中删除，<option>因为默认情况下我希望选择并显示占位符选项

一切都好，只是在我从下拉列表中单击一个选项后，它没有显示为已选中，但仍然是占位符（请注意，“在视觉之后”它正确地采用了单击的选项，因为价格会相应变化）

任何想法（或解决方法）如何解决？

4

0 回答 0