Как выбрать фото в выпадающем списке?

Как поместить изображение в элемент типа "option" внутри блока "select" с использованием HTML, CSS и JavaScript?
  • 27 апреля 2024 г. 9:40
Ответы на вопрос 3
Для того чтобы выбирать фото в выпадающем списке, можно использовать тег "img" внутри элемента "option" в блоке "select". Далее приведены шаги по созданию такого элемента:

1. Создайте блок "select" в HTML:
```html
<select id="photoSelect">
    <option value="photo1">Фото 1</option>
    <option value="photo2">Фото 2</option>
    <option value="photo3">Фото 3</option>
</select>
```

2. Добавьте стили для элементов "option" и "img" в CSS:
```css
option {
    display: flex;
    align-items: center;
    padding: 5px;
}

img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}
```

3. Добавьте изображения и атрибуты src в каждый элемент "option" в JavaScript:
```javascript
const select = document.getElementById('photoSelect');

const option1 = document.createElement('option');
const img1 = document.createElement('img');
img1.src = 'photo1.jpg';
option1.value = 'photo1';
option1.appendChild(img1);
select.appendChild(option1);

const option2 = document.createElement('option');
const img2 = document.createElement('img');
img2.src = 'photo2.jpg';
option2.value = 'photo2';
option2.appendChild(img2);
select.appendChild(option2);

const option3 = document.createElement('option');
const img3 = document.createElement('img');
img3.src = 'photo3.jpg';
option3.value = 'photo3';
option3.appendChild(img3);
select.appendChild(option3);
```

Теперь у вас должны быть три фото в выпадающем списке. При выборе элемента, можно использовать JavaScript для обработки выбранного изображения.
Выставить что либо, кроме plain text, в option невозможно ни " на джаве ", ни " на ксс ". 
Используйте библиотеку кастомных селектов, например, select2 .
Нужен кастомный селект вроде select2
Похожие вопросы