Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.08.2024, 10:12
Интересующийся
Отправить личное сообщение для Димитр Посмотреть профиль Найти все сообщения от Димитр
 
Регистрация: 09.07.2024
Сообщений: 17

Выбор элемента изи списка
Привет!!!

<div>
<select name="Select Product" id="">
<option value="">--Please choose an option--</option>
<option value="">Advanced Salmon</option>
<option value="">Apple Cider</option>
<option value="">Aple Pie</option>
<option value="">Appreciation Baguatte</option>
</select>
</div>

Как сделать, чтобы при выборе продукта из списка открывалось в div, как на втором рис., составные части продукта?
Изображения:
Тип файла: jpg Безымянный1.jpg (14.4 Кб, 3 просмотров)
Тип файла: jpg Безымянный2.jpg (7.9 Кб, 3 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 09.08.2024, 14:15
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,743

А где и как заданы эти составные части для каждого продукта? В какой то БД на сервере или просто в какой то таблиц, заданной массивом в js или заранее прописаны где то в html?
Ответить с цитированием
  #3 (permalink)  
Старый 09.08.2024, 14:41
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от Димитр
Как сделать, чтобы при выборе продукта из списка открывалось в div, как на втором рис., составные части продукта?
Что-то нечто такого можно сделать...

<style>
* {
  font-size: 20px;
  padding: 2px;
}
</style>
<select name="country" id="country">
  <option value="bra" selected>Бразилия</option>
  <option value="rus">Россия</option>
  <option value="ind">Индия</option>
  <option value="chn">Китай</option>
  <option value="zaf">ЮАР</option>
</select>
<select name="city" id="city">
</select>
<script>
const cities = {
  bra: ["Сан-Паулу", "Рио-де-Жанейро"],
  rus: ["Москва", "Санкт-Петербург"],
  ind: ["Мумбаи", "Дели"],
  chn: ["Шанхай", "Пекин"],
  zaf: ["Йоханнесбург", "Кейптаун"]  
};
const country = document.getElementById("country");
const city = document.querySelector("#city");
window.onload = selectCountry;
country.onchange = selectCountry;
selectCountry()

function selectCountry(ev){
  city.innerHTML = "";
  const c = this.value || "bra"
  for(let i = 0; i < cities[c].length; i++){
    const o = new Option(cities[c][i], i, false, false);
    city.add(o);
  };
}
</script>

Последний раз редактировалось ksa, 09.08.2024 в 14:47.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Кнопка переименования элемента списка. Setraiser Элементы интерфейса 24 05.07.2018 10:19
Считывание значения текущего выбранного элемента списка в переменную apomin Элементы интерфейса 1 15.10.2015 19:47
Как определить порядковый номер элемента списка? mbp64 Элементы интерфейса 4 22.05.2014 17:45
Выбор случайного слова из списка alerzo Элементы интерфейса 3 19.04.2014 15:46
Выбор элемента из выпадающего списка Naik jQuery 0 21.07.2011 13:49