智能选择器

智能选择器允许你轻松将通常的表单选择器转换为具有分组的单选按钮或复选框输入的动态页面。在许多本机 iOS 应用程序中，你可以看到此类功能

智能选择器布局

智能选择布局相当简洁。它是一个众所周知的 列表视图 链接，内部具有 <select> 和 item-link 上的附加 smart-select 类

<div class="list">
  <ul>
    <!-- Smart select item -->
    <li>
      <!-- Additional "smart-select" class -->
      <a href="#" class="item-link smart-select">
        <!-- select -->
        <select name="fruits">
          <option value="apple" selected>Apple</option>
          <option value="pineapple">Pineapple</option>
          ...
        </select>
        <div class="item-content">
          <div class="item-inner">
            <!-- Select label -->
            <div class="item-title">Fruit</div>
            <!-- Selected value, not required -->
            <div class="item-after">Apple</div>
          </div>
        </div>
      </a>
    </li>
    <!-- Another smart selects or list view elements -->
    ...
  </ul>
</div>

自定义选项图标

我们可通过在 <option> 元素上使用 data-option-icon 属性来指定智能选择页面列表视图（选项）图标

• data-option-icon - 如果它只是一个字符串，则将使用此类创建一个图标。如果其格式为 f7:icon_name，则它会创建一个 F7 图标。如果其格式为 md:icon_name，则它会创建一个 Material 图标
• data-option-icon-ios - 与 data-option-icon 相同，但仅当 iOS 主题处于激活状态时才会应用
• data-option-icon-md - 与 data-option-icon 相同，但仅当 MD 主题处于激活状态时才会应用

例如

• <option data-option-icon="my-icon"> 将生成 <i class="icon my-icon"></i> 列表项图标
• <option data-option-icon="f7:house_fill"> 将生成 <i class="icon f7-icons">house_fill</i> 列表项图标
• <option data-option-icon="material:home"> 将生成 <i class="icon material-icons">home</i> 列表项图标
• <option data-option-icon-ios="f7:house" data-option-icon-md="material:home"> 将生成
  • <i class="icon f7-icons">house</i> - 当 iOS 主题处于激活状态时
  • <i class="icon material-icons">home</i> - 当 MD 主题处于激活状态时

自定义选项颜色和图像

我们还可以指定智能选择页面列表视图元素图像或颜色。我们需要在智能选择 <select>（为所有选项设置默认图像）或在 <option> 上使用附加 data-option-image 属性来设置单个选项上的图像或图标。

对于单个选项，我们还可以使用 data-option-color 和 data-option-class 属性来添加特定选项颜色或 css 类以进行附加样式处理

<li>
  <a href="#" class="item-link smart-select">
    <select name="fruits">
      <option value="apple" selected data-option-image="https://cdn.framework7.io/placeholder/abstract-29x29-1.jpg">Apple</option>
      <option value="pineapple" data-option-image="https://cdn.framework7.io/placeholder/abstract-29x29-2.jpg">Pineapple</option>
      <option value="pear" data-option-color="orange" data-option-image="https://cdn.framework7.io/placeholder/abstract-29x29-3.jpg">Pear</option>
      ...
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Fruit</div>
      </div>
    </div>
  </a>
</li>

多选和 <optgroup>

我们还可以使用 <optgroup> 对选项进行多选和分组。因此，如果我们为选择添加 multiple 属性，则智能选择页面上的单选按钮将自动转换为复选框

<li>
  <a href="#" class="item-link smart-select">
    <!-- "multiple" attribute for multiple select-->
    <select name="car" multiple>
      <!-- options grouped within "optgroup" tag-->
      <optgroup label="Japanese">
        <option value="honda" selected>Honda</option>
        <option value="lexus">Lexus</option>
        ...
      </optgroup>
      <optgroup label="German">
        <option value="audi" selected>Audi</option>
        <option value="bmw">BMW</option>
        ...
      </optgroup>
      <optgroup label="American">
        <option value="cadillac">Cadillac</option>
        <option value="chrysler">Chrysler</option>
        ...
      </optgroup>
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Car</div>
      </div>
    </div>
  </a>
</li>

多选和 maxlength

对于多选，我们还可以使用 maxlength 属性来限制可能选定的选项数量

<li>
  <a href="#" class="item-link smart-select">
    <!-- "maxlength" attribute to limit number of possible selected items -->
    <!-- we won't allow to select more than 3 items -->
    <select name="car" multiple maxlength="3">
      <optgroup label="Japanese">
        <option value="honda" selected>Honda</option>
        <option value="lexus">Lexus</option>
        ...
      </optgroup>
      <optgroup label="German">
        <option value="audi">Audi</option>
        <option value="bmw">BMW</option>
        ...
      </optgroup>
      <optgroup label="American">
        <option value="cadillac">Cadillac</option>
        <option value="chrysler">Chrysler</option>
        ...
      </optgroup>
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Car</div>
      </div>
    </div>
  </a>
</li>

不同的显示值

在选项上使用 data-display-as 属性，我们可以在不同的方式中显示所选值

<li>
  <a href="#" class="item-link smart-select">
    <select name="days">
      <option value="monday" selected data-display-as="Mon">Monday</option>
      <option value="tuesday" data-display-as="Tue">Tuesday</option>
      <option value="wednesday" data-display-as="Wed">Wednesday</option>
      <option value="thursday" data-display-as="Thu">Thursday</option>
      <option value="friday" data-display-as="Fri">Friday</option>
      <option value="saturday" data-display-as="Sat">Saturday</option>
      <option value="sunday" data-display-as="Sun">Sunday</option>
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Day</div>
      </div>
    </div>
  </a>
</li>

智能选择应用方法

让我们查看相关的应用方法以使用智能选择

Smart Select 参数

现在我们来看一看创建 Smart Select 所需的可用参数列表

<div class="block searchbar-not-found">{{appendSearchbarNotFound}}</div>

<div class="block searchbar-not-found">Nothing found</div>

var smartSelect = app.smartSelect.create({
  ...
  on: {
    opened: function () {
      console.log('Smart select opened')
    }
  }
})

var app = new Framework7({
  smartSelect: {
    pageTitle: 'Select Option',
    openIn: 'popup',
  }
});

智能选择方法和属性

因此，要创建智能选择，我们必须调用

var smartSelect = app.smartSelect.create({ /* parameters */ })

之后，我们获得了它的初始化实例（如上面示例中的 smartSelect 变量），其中包含有用的方法和属性

智能选择事件

智能选择将在智能选择元素以及应用程序和智能选择实例上触发以下 DOM 事件

DOM 事件

应用程序和智能选择实例事件

智能选择实例在自身实例和应用程序实例上触发事件。应用程序实例事件具有相同名称，前缀为 smartSelect。

智能选择自动初始化

如果您不需要使用智能选择 API，并且您的智能选择在页面中且在页面初始化时显示在 DOM 中，则可以通过只添加额外的 smart-select-init 类来自动初始化它

<li>
  <!-- Add smart-select-init class -->
  <a href="#" class="item-link smart-select smart-select-init">
    <!-- select -->
    <select name="fruits">
      <option value="apple" selected>Apple</option>
      <option value="pineapple">Pineapple</option>
      ...
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Fruit</div>
        <div class="item-after">Apple</div>
      </div>
    </div>
  </a>
</li>

在这种情况下，如果您需要访问创建的智能选择实例，可以使用应用程序方法 app.smartSelect.get

var smartSelect = app.smartSelect.get('.smart-select');

在使用自动初始化时，可能需要传递附加参数。在这种情况下，可以通过智能选择元素上的 data- 属性传递所有附加参数。

<li>
  <!-- Pass parameters as kebab-case data attributes -->
  <a href="#" class="item-link smart-select smart-select-init" data-open-in="popup" data-virtual-list="true" data-page-back-link-text="Go back">
    <!-- select -->
    <select name="fruits">
      <option value="apple" selected>Apple</option>
      <option value="pineapple">Pineapple</option>
      ...
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Fruit</div>
        <div class="item-after">Apple</div>
      </div>
    </div>
  </a>
</li>

CSS 变量

以下是与 CSS 变量（CSS 自定义属性）相关的变量列表。

:root {
  /*
  --f7-smart-select-sheet-bg: var(--f7-list-bg-color);
  --f7-smart-select-sheet-toolbar-border-color: var(--f7-bars-border-color);
  */
}

示例

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Smart Select</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      Framework7 allows you to easily convert your usual form selects to dynamic pages with radios:
    </div>
    <div class="list list-strong-ios list-outline-ios list-dividers-ios">
      <ul>
        <li>
          <a class="item-link smart-select smart-select-init">
            <select name="fruits">
              <option value="apple" selected>Apple</option>
              <option value="pineapple">Pineapple</option>
              <option value="pear">Pear</option>
              <option value="orange">Orange</option>
              <option value="melon">Melon</option>
              <option value="peach">Peach</option>
              <option value="banana">Banana</option>
            </select>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Fruit</div>
              </div>
            </div>
          </a>
        </li>
        <li>
          <a class="item-link smart-select smart-select-init" data-open-in="popup" data-searchbar="true"
            data-searchbar-placeholder="Search car">
            <select name="car" multiple>
              <optgroup label="Japanese">
                <option value="honda" selected>Honda</option>
                <option value="lexus">Lexus</option>
                <option value="mazda">Mazda</option>
                <option value="nissan">Nissan</option>
                <option value="toyota">Toyota</option>
              </optgroup>
              <optgroup label="German">
                <option value="audi" selected>Audi</option>
                <option value="bmw">BMW</option>
                <option value="mercedes">Mercedes</option>
                <option value="vw">Volkswagen</option>
                <option value="volvo">Volvo</option>
              </optgroup>
              <optgroup label="American">
                <option value="cadillac">Cadillac</option>
                <option value="chrysler">Chrysler</option>
                <option value="dodge">Dodge</option>
                <option value="ford" selected>Ford</option>
              </optgroup>
            </select>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Car</div>
              </div>
            </div>
          </a>
        </li>
        <li>
          <a class="item-link smart-select smart-select-init" data-open-in="sheet">
            <select name="mac-windows">
              <option value="mac" selected>Mac</option>
              <option value="windows">Windows</option>
            </select>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Mac or Windows</div>
              </div>
            </div>
          </a>
        </li>
        <li>
          <a class="item-link smart-select smart-select-init" data-open-in="popover">
            <select name="superhero" multiple>
              <option value="Batman" selected>Batman</option>
              <option value="Superman">Superman</option>
              <option value="Hulk">Hulk</option>
              <option value="Spiderman">Spiderman</option>
              <option value="Ironman">Ironman</option>
              <option value="Thor">Thor</option>
              <option value="Wonder Woman">Wonder Woman</option>
            </select>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Super Hero</div>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>