I just saw an example of a select box where you could add an option by typing an not existing option in the select box it self and by clicking a submit ,
function myFunction()
{
var x = document.getElementById("mySelect");
var option = document.createElement("option");
option.text = "Kiwi";
x.add(option);
}so , my question is how can i change " kiwi" to any other word could the user could insert
i want to let the user insert the word he wants , " kiwi must include in my js ' but what about the user ? how can he do that ? i don't even know if this is the right method to add an option to select box , sorry if my question was not clear
You need to grab text from an input on a button click then assign that text to a new option element. Finally, append it to the select element.
To make this scaleable we are going to create a div to hold all our elements and assign the event listener to that element. We can then use event bubbling and the magic of the this keyword to get the appropriate text and assign it to the appropriate select element.
//Find our fancy select elements
document.querySelectorAll(".fancy-select").forEach(function(fancySelect){
//Add a click event handler -
//NOTE that "this" will refer to the clicked "fancy select element"
fancySelect.addEventListener("click", function(event){
//Check the event origingated from the button
if(event.target.matches("button")){
//Get the text element in "this" fancy-select element
let textElement = this.querySelector(".addOptionText");
//Check there is text
if(textElement.value !== ""){
//Create and option element
let option = document.createElement("option");
//Givie it the text
option.innerHTML = textElement.value;
//Append it to the select
this.querySelector("select").appendChild(option);
//optionally select the new element
this.querySelector("select").selectedIndex = this.querySelector("select").options.length - 1;
//Finally empty the text box
textElement.value = "";
}
}
});
});.fancy-select{display:inline-block;}
.fancy-select select {display:block; min-width:200px;}<div class="fancy-select">
<input type="text" class="addOptionText"/><button type="button">+</button>
<select>
<option>Select 1 Option 1</option>
<option>Select 1 Option 2</option>
<option>Select 1 Option 3</option>
</select>
</div>
<div class="fancy-select">
<input type="text" class="addOptionText"/><button type="button">+</button>
<select>
<option>Select 2 Option 1</option>
<option>Select 2 Option 2</option>
<option>Select 2 Option 3</option>
</select>
</div>function myFunction()
{
var x = document.getElementById("mySelect");
var option = document.createElement("option");
option.text = document.getElementById("text").value;
x.add(option);
}body, button{
font-family: consolas, sans-serif;
}
h1,h2,h3{
border-bottom: 2px solid black;
}<h1>Add Options!</h1>
<mark>Sorry, but your question was not clear enough and I could not fully understand it. Here is my best shot at answering the question.</mark>
<h2> Result </h2>
<textarea placeholder = "Type here" id = "text"></textarea>
<input type = "submit" onclick = "myFunction()">
<br>
<select id = "mySelect">
</select>So first, get a textarea (<textarea></textarea>) and make the id = "text". If you already have a textarea or a input you can skip this step.
Then, you can put
option.text = document.getElementById("text").value;
//instead of option.text = "kiwi";
The .value at the end is for inputs and textareas and tells the program what the user has inputted.