0

Всем доброго дня. Не могу понять как сделать так что бы получать значения option из select которая созданна на js

 if (id == 2) {
            const label_dut = document.createElement('label')
            label_dut.innerText = `Тип`
            label_dut.className = 'input-label'
            const select_dut = document.createElement('select')
            select_dut.className = 'form-select form-select-sm dutaur'
            select_dut.name = 'dutaur'
            select_dut.id = 'dut'

            fetch('{{route('dutaur.type')}}').then(response => response.json()).then(result => {
                result.map(option_dut => {
                    const options_dut = document.createElement('option')
                    options_dut.value = option_dut.type
                    options_dut.text = option_dut.type
                    select_dut.append(options_dut)
                })
                form.prepend(select_dut)
                form.prepend(label_dut)
                console.log(select_dut);

            })
            
        }

Цель передать полученный value в следующий fetch-запрос и создать новое поле формы

Добавляю весь код(с ошибкой)

 function sortamnet_detail(id = 1) {
        img_sort.innerHTML = ''
        form.innerHTML = ''
        //Уникальные условия для дутавра/балки
        if (id == 2) {
            const label_dut = document.createElement('label')
            label_dut.innerText = `Тип`
            label_dut.className = 'input-label'
            const select_dut = document.createElement('select')
            select_dut.className = 'form-select form-select-sm dutaur'
            select_dut.name = 'dutaur'
            select_dut.id = 'dut'

            fetch('{{route('dutaur.type')}}').then(response => response.json()).then(result => {
                result.forEach(option_dut => {
                    const options_dut = document.createElement('option')
                    options_dut.value = option_dut.type
                    options_dut.text = option_dut.type
                    select_dut.append(options_dut)
                })
                form.prepend(select_dut)
                form.prepend(label_dut)
            })

            select_dut.onchange = (e) => {
                console.log(e.target.value);
            }

        }

        fetch('{{route('steels.sortamnetDetail')}}/' + id).then(response => response.json()).then(result => {
            let img = document.createElement('img')
            img.className = 'img-fluid'
            img.src = '{{asset('images')}}/' + result.image;
            img_sort.append(img);
            head_sort.innerText = result.name;
            result.form.forEach(forms => {
                if (forms.type == 'number') {
                    form.innerHTML += `<label class="form-label" for="">${forms.name}</label><input type="number" name="${forms.name}" class="form-control form-control-sm mb-1" placeholder="${forms.name}">`;
                }
                if (forms.type == 'steel_grade') {
                    fetch('{{route('get.Grade')}}/' + steel_id).then(response => response.json()).then(res => {
                        const label2 = document.createElement('label')
                        label2.innerText = `${forms.name}`
                        const select = document.createElement('select')
                        select.className = 'form-select form-select-sm mb-1'
                        select.name = `steel_grade`
                        res.forEach(options => {
                            const option = document.createElement('option')
                            option.value = options.сoefficient
                            option.text = options.name
                            select.append(option)
                        })
                        form.prepend(select);
                        form.prepend(label2)
                    })
                }

                if (forms.type == 'select') {
                    fetch('{{route('get.values')}}/' + forms.id).then(response => response.json()).then(result => {
                        const label1 = document.createElement('label')
                        label1.innerText = `${forms.name}`
                        const select2 = document.createElement('select')
                        select2.className = 'form-select form-select-sm mb-1'
                        select2.name = `${forms.name}`
                        result.forEach(options => {
                            const option = document.createElement('option')
                            option.value = options.value
                            option.text = options.value
                            select2.append(option)
                        })
                        form.prepend(select2);
                        form.prepend(label1);
                    })
                    // form.innerHTML += `<label class="form-label" for="">${forms.name}</label> <select  name="${forms.name}" class="form-control form-control-sm mb-1">`;
                }

            })
        })

    }
3
  • как сделать так что бы получать значения option из select которая созданна на js --- а в чём сложность? Вы евдь знаете про addEventListener? Commented 8 февр. в 14:58
  • Вы же создали элемент select_dut, вот на него и вешайте событие изменения...
    – SwaD
    Commented 8 февр. в 14:59
  • К сожелению это не работает select_dut.onchange = (e) => { console.log(e.currentTarget.value); } Commented 9 февр. в 7:14

1 ответ 1

0
  1. onchange нужно объявить при создании элемента
  2. Значение нужно доставать из свойства target события изменения
  3. Не используйте map если вам не нужен результат перебора, а используйте forEach
  4. У select по умолчанию, всегда выбран первый элемент и если вам нужно использовать выбор первого значения, то можно добавить первый option с пустым значением и текстом "не выбрано", а при изменении списка проверять на пустое значение.

const form = document.getElementById('form-id');
const label_dut = document.createElement('label')
label_dut.innerText = `Тип`
label_dut.className = 'input-label'
const select_dut = document.createElement('select')
select_dut.className = 'form-select form-select-sm dutaur'
select_dut.name = 'dutaur'
select_dut.id = 'dut';
select_dut.value = '';
select_dut.onchange = (e) => console.log(e.target.value);

Promise.resolve([{
    type: 'type1'
  }, {
    type: 'type2'
  }])
  .then((options) => {
    options.forEach((option) => {
      const options_dut = document.createElement('option')
      options_dut.value = option.type
      options_dut.text = option.type
      select_dut.append(options_dut)
    });
    form.prepend(select_dut)
    form.prepend(label_dut)
  });
<form id="form-id"></form>

3
  • Ваш совет помог, и навел на решение проблемы, суть была в конфликте с другой частью кода, сможете ли вы разобрать в чем ошибка? я скорректирую свой основной блок вопроса добавлением всего кода функции Commented 9 февр. в 9:59
  • Опишите ошибки или некорректное поведение кода. Без этого понять в чём проблема трудно. + совет: разбейте код по функциям - это сделает его более читаемым и поддерживаемым. Например: создание_элемента_селекта(имя, эементы, обработчик), создание_селекта_выбора_типа(эементы, обработчик) и т.д. Commented 14 февр. в 7:10
  • У меня была проблема доступа в блоке кода, видимо гдето не закрыл тело функции Commented 17 апр. в 16:43

Ваш ответ

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

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