Примеры выпадающего списка есть на официальном сайте, но если попробовать повторить то же самое для each-блока, то выбирая пункт меню из выпадающего списка для одного элемента, во всех остальных действие будет повторяться. Расскажу, как это избежать и сделать правильно.
Для того, чтобы избежать повторений нужно передавать внутрь value для каждого элемента свою переменную.
Но как понять сколько элементов у нас будет? Не создавать же для каждого элемента отдельную переменную как в доках?
Мы воспользуемся созданием переменной из того же массива данных each-блока, из которого мы делаем итерацию. А именно мы обратимся к несуществующему ключу (el.value), таким образом, создав его для каждого элемента.
Теперь не важно, сколько элементов будет внутри массива elements, каждое поле будет уникальным. А при выборе из списка меню определенного значения – только это значение и только для этого поля будет отправлено в обрабатывающую функцию changeElement(el.id, el.value).
Выглядит это так:
<div class="cell select-block">
<form class="select-block" on:change={() => changeElement(el.id, el.value)}>
<label>
<select bind:value={el.value}>
<option value="" selected disabled hidden>Выбрать значение</option>
<option value='пункт 1'>пункт 1</option>
<option value='пункт 2'>пункт 2</option>
</select>
</label>
</form>
</div>
{/each}
А внутри функции обрабатываем переданные значения по своему усмотрению. Например, можно передать эти значения на бэкенд для изменения в базе данных.
Пример как это может выглядеть:
let yes = confirm("Вы хотите поменять " + "'" + value + "'" + "?");
if (!yes) {
return;
}
let data = {
'id': id,
'value': value
}
postFetch('change-value/', data).then((r) => {
if (r === 'ok') {
...
}
});
}
Затем осталось это обработать на бэкенде.
