0

Есть выпадающий список select в html с 3 возможными вариантами. Есть js код в котором есть 3 объекта со своими характеристиками, которые должны соответствовать этим 3 вариантам выпадающего списка из select`а (например obj_1 соответствует переменной one и т.д.). Как в поля input вставлять значения свойства выбранного объекта (интересует цена и объем)?

let one = {
    id: 1,
    name: 'Name1',
    price: 400,
    value: 450,
};

let two = {
    id: 2,
    name: 'Name2',
    price: 500,
    value: 550,
};

let three = {
    id: 3,
    name: 'Name3',
    price: 600,
    value: 650,
};
<select name="select" id="select" onchange="">
        <option value="">submit your choice</option>
        <option value="obj_1">Object 1</option>
        <option value="obj_2">Object 2</option>
        <option value="obj_3">Object 3</option>
    </select>
    <input type="number" id="inputA" placeholder="цена">
    <input type="number" id="inputB" placeholder="объем">

0

1 ответ 1

0

const inputA = document.querySelector("#inputA");
const inputB = document.querySelector("#inputB");
const select = document.querySelector("#select");

let one = {
    id: 1,
    name: 'Name1',
    price: 400,
    value: 450,
};

let two = {
    id: 2,
    name: 'Name2',
    price: 500,
    value: 550,
};

let three = {
    id: 3,
    name: 'Name3',
    price: 600,
    value: 650,
};

const test = {"obj_1": one, "obj_2": two, "obj_3": three}

select.addEventListener("change", ({target}) =>
{
  if (test.hasOwnProperty(target.value) === false)
  {
    return;
  }
  
  const obj = test[target.value];

  inputA.value = obj.price;
  inputB.value = obj.value;
});
<select name="select" id="select" onchange="">
        <option value="">submit your choice</option>
        <option value="obj_1">Object 1</option>
        <option value="obj_2">Object 2</option>
        <option value="obj_3">Object 3</option>
    </select>
    <input type="number" id="inputA" placeholder="цена">
    <input type="number" id="inputB" placeholder="объем">

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.