I created a drop-down list with car names. I want to create an event in javascript which after selecting some elements from the drop down list will be passed to the div block using that function. For example, I select an Audi from my drop-down list and in the div block to print it is an Audi. I want to create an event and a function that, after selecting one of the options from the drop-down list with that function, will be passed to the giant block. I've created a function that takes the value of an item from a drop-down list but I just don't know how to proceed to my goal Here is my code
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>newparagraph.innerText = value; will show 1, 2 or 3
You need the text of the options
note I wrrap the code in a load event handler so we can place the code where we want including in the head
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>