# Выпадающие списки

Элемент select позволяет создать список с возможностью одиночного и множественного выбора.

Выбор одного варианта из списка:

```markup
<select v-model="selected">
  <option disabled value="">Выберите один из вариантов</option>
  <option>А</option>
  <option>Б</option>
  <option>В</option>
</select>
<span>Выбрано: {{ selected }}</span>
```

```javascript
new Vue({
  el: '...',
  data: {
    selected: ''
  }
})
```

<div align="left"><img src="https://955258160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LuIgnBBZPLjlzke50z9%2F-Lxu3YLax3fmCaK3z-B2%2F-Lxw2G1-qN9e9fo7NnG2%2Fimage.png?alt=media&#x26;token=e7480091-9d79-4b20-b048-f992ecf2a353" alt=""></div>

> Если начальное значение выражения `v-model` не соответствует ни одному из вариантов списка, элемент `<select>` будет отображаться в «невыбранном» состоянии. В iOS это приведёт к тому, что пользователь не сможет выбрать первый элемент, потому что iOS не сгенерирует событие change в этом случае. Поэтому рекомендуется предоставлять отключённый вариант выбора с пустым значением value, как показано в примере выше.

Выбор нескольких вариантов из списка (с привязкой к массиву):

```markup
<select v-model="selected" multiple>
  <option>А</option>
  <option>Б</option>
  <option>В</option>
</select>
<br>
<span>Выбрано: {{ selected }}</span>
```

<div align="left"><img src="https://955258160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LuIgnBBZPLjlzke50z9%2F-Lxu3YLax3fmCaK3z-B2%2F-Lxw2YKBa-Wyv8aHrvbc%2Fimage.png?alt=media&#x26;token=8dbce286-4b4c-4f48-86f4-4c2ffb0a4d51" alt=""></div>

Динамическое отображение списка опций с помощью `v-for`:

```markup
<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Выбрано: {{ selected }}</span>
```

```javascript
new Vue({
  el: '...',
  data: {
    selected: 'А',
    options: [
      { text: 'Один', value: 'А' },
      { text: 'Два', value: 'Б' },
      { text: 'Три', value: 'В' }
    ]
  }
})
```

<div align="left"><img src="https://955258160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LuIgnBBZPLjlzke50z9%2F-Lxu3YLax3fmCaK3z-B2%2F-Lxw2iPnoYEnuMO6eg4C%2Fimage.png?alt=media&#x26;token=cf60b2e6-de3b-4926-aa25-935884ef2571" alt=""></div>