智能选择

智能选择允许您轻松地将常规表单选择转换为具有分组单选或复选框输入的动态页面。您可以在许多原生iOS应用程序中看到此功能

智能选择器布局

智能选择布局相当简单。它是一个众所周知的列表视图链接，带有<select>内部，以及额外的smart-select类在item-link:

<div class="list">
  <ul>
    <!-- Smart select item -->
    <li>
      <!-- Additional "smart-select" class -->
      <span 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>
      </span>
    </li>
    <!-- Another smart selects or list view elements -->
    ...
  </ul>
</div>

自定义选项图标

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

• data-option-icon- 如果它只是一个字符串，则将创建一个具有此类的图标。如果它是f7:icon_name格式，则将创建F7-Icons图标。如果是md:icon_name格式，则将创建Material Icons图标
• 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主题激活时

自定义选项颜色和图像

我们还可以指定智能选择页面的列表视图元素的图像或颜色。我们需要在智能选择data-option-image上使用额外的属性（以设置所有选项的默认图像）或在上<select> (to set default image for all options) or on <option>上使用属性以在单个选项上设置图像或图标。

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

<li>
  <span 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>
  </span>
</li>

多重选择和<optgroup>

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

<li>
  <span 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>
  </span>
</li>

多重选择和maxlength

使用多重选择，我们还可以使用maxlength属性来限制可能的选定项数：

<li>
  <span 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>
  </span>
</li>

不同的显示值

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

<li>
  <span 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>
  </span>
</li>

智能选择器应用方法

让我们看看与智能选择相关的方法：

智能选择参数

现在让我们看看创建智能选择时需要的一组可用参数：

<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 class:

<li>
  <!-- Add smart-select-init class -->
  <span 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>
  </span>
</li>

在这种情况下，如果你需要访问创建的智能选择器实例，你可以使用app.smartSelect.get app method:

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

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

<li>
  <!-- Pass parameters as kebab-case data attributes -->
  <span 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>
  </span>
</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>