Блог

Главная - Вопросы по программированию - Как подключить функции div и javascript и событие и создать функцию, которая передает значение из выпадающего списка в другой элемент?

Как подключить функции div и javascript и событие и создать функцию, которая передает значение из выпадающего списка в другой элемент?

#javascript #html #css

Вопрос:

Я создал раскрывающийся список с названиями автомобилей. Я хочу создать событие в javascript, которое после выбора некоторых элементов из выпадающего списка будет передано в блок div с помощью этой функции. Например, я выбираю Audi из своего раскрывающегося списка, и в блоке div для печати это Audi. Я хочу создать событие и функцию, которые после выбора одного из вариантов из выпадающего списка с этой функцией будут переданы в гигантский блок. Я создал функцию, которая принимает значение элемента из выпадающего списка, но я просто не знаю, как перейти к своей цели, Вот мой код

 function jsFunction(value) {
  var div1 = document.getElementById('div1')
  var newparagraph = document.createElement("p");
  newparagraph.innerText(value);
  div1.appendChild(newparagraph);
} 
 <select id="ddl" name="ddl" onmousedown="this.html='';" onchange="jsFunction(this.value);">
  <option id="Audi1" value='1'>Audi</option>
  <option id="Mercedes2" value='2'>Mercedes</option>
  <option id="BMW3" value='3'>BMW</option>
</select>
<div id="div1">

</div>

Комментарии:

1. Опечатка newparagraph.innerText = value; — вместо этого я бы использовал textContent

2. Также используйте «пожалуйста, выберите», в противном случае пользователь не сможет получить доступ к Audi, не переключаясь туда и обратно

3. Я изменяю это, но все равно мой код не работает

4. Да, это так. Он показывает значение, равное 1, 2 или 3. И опциям не нужны идентификаторы

5. Но как я могу сделать так, чтобы при выборе Audi из моего выпадающего списка блок div получал текст, в котором пишется «Вы выбираете Audi». Я не знаю, как связать это с функцией и сделать для этого функцию javascript

Ответ №1:

newparagraph.innerText = value; покажет 1, 2 или 3

Вам нужен текст опций

примечание Я записываю код в обработчике событий загрузки, чтобы мы могли разместить код там, где мы хотим, в том числе в заголовке

 window.addEventListener("load", function() {
  document.getElementById("ddl").addEventListener("change", function() {
    if (!this.value) return
    var div1 = document.getElementById('div1')
    var newparagraph = document.createElement("p");
    newparagraph.textContent = 'You chose '   this.options[this.selectedIndex].text;
    div1.appendChild(newparagraph);
  });
}); 
 <select id="ddl" name="ddl">
  <option value=''>Please select</option>
  <option value='1'>Audi</option>
  <option value='2'>Mercedes</option>
  <option value='3'>BMW</option>
</select>
<div id="div1">

</div>

Комментарии:

1. Можно также использовать this.selectedOptions[0].text вместо this.options[this.selectedIndex].text

2. Хм, это странно. Этот код работает в фрагменте кода, но он не работает в Google Chrome. Вот код из моего кода visual studio снова

3. @PeterSeliger Это тот, кого я никогда раньше не видел. Кстати, он не совместим со старым браузером

4. Я опубликую скриншот

5. @Edprog я упаковал его в кучу. Если ваш код вставлен до того, как элемент существует

Метки: ,