Adding new option to select menu
Question
This is a very simple select bar. Why is it not working?
<html>
<form>
<label>
<select id="sel1">
<option> op1 </option>
<option> op2 </option>
<option> op3 </option>
</select>
<input onclick="s()" type="submit" value=" ok! ">
</label>
</form>
<script>
function s(){
document.getElementById("sel1").innerHTML += "<option> op4 </option>";
}
</script>
</html>
If I want people to add new option, I need to put some variable on it. How can I add php variable instead of op4, op5, etc?
5 answers
solution1
2 ACCPTED 2015-05-10 19:23:15
Create an actual option element and append it to the select element.
var option = document.createElement("option");
option.value = "op4";
option.innerHTML = "op4";
var select = document.getElementById("sel1");
select.appendChild(option);
You should probably be using value attributes in your options too.
This is the next question. Then if i want people to add new option , i need to put some php variable on it. how can i add php variable instead of op4 , op5 and... options?
No, this has nothing to do with PHP.
<input id="option-name">
Using the example above, instead of using a fixed "op4" , use the value from the input
var input = document.getElementById("option-name");
var option = document.createElement("option");
option.value = input.value;
option.innerHTML = input.value;
var select = document.getElementById("sel1");
select.appendChild(option);
Now the input value will be used as the name/value for the new option
solution2
1 2015-05-10 19:25:46
Try this:
<script>
function s(){
var o=new Option();
o.value="<?php echo $option; ?>";
o.text="<?php echo $option; ?>";
var os=document.getElementById("sel1").options;
os[os.length]=o;
}
</script>
solution3
1 2015-05-10 19:32:22
Change this:
<input onclick="s()" type="submit" value=" ok! ">
To this:
<input onclick="s()" type="button" value=" ok! ">
Using type="submit" will result in your form being submitted and thus your page being reloaded. Using type="button" prevents this.
solution4
1 2015-05-10 19:33:01
What happens is the form is submitted and as the form element doesn't have action attribute the current page is reloaded.
You should listen to submit event and prevent the default action of the event using preventDefault method of the event object.
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault();
var option = new Option('optionText', 'optionValue');
document.getElementById("sel1").add(option);
});
Another option is using a button element with type attribute of button instead of a submit input .
solution5
0 2015-05-10 23:39:44
I finally write completed Answer. In 2 ways; The first way is safer than another. first way is :
<html>
<form>
<label>
<input type="text" id="option-name">
<select id="sel1">
<option> Option1 </option>
<option> Option2 </option>
<option> Option3 </option>
</select>
<input onclick="s()" type="button" value=" Create ! "><br/><br/>
</label>
</form>
<script>
function s(){
var input = document.getElementById("option-name");
var option = document.createElement("option");
option.value = input.value;
option.innerHTML = input.value;
var select = document.getElementById("sel1");
select.appendChild(option);
}
</script>
</html>
That is other guys answer too. But the second way is easier and useful. not safer (I think innerhtml is not so safe for this purpose! but if I wrong , please tell me.)!
<html>
<form method="post" action="index.php">
<label>
<input type="text" name="txt1">
<select id="sel1">
<option> Option1 </option>
<option> Option2 </option>
<option> Option3 </option>
</select>
<input type="submit" value=" Create ! ">
</label>
</form>
<script>
document.getElementById("sel1").innerHTML += "<option><?php echo $_POST['txt1']; ?></option>";
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.