I require 2 dropdown list name it Parent n child. I have made by child a hidden field to only appear as parent value is clicked.
Im trying to apply both add and remove method concurrently. Here is an example from w3schools on the respective add() and remove() method.
How do i integrate them both in one?
//Add() method
<!DOCTYPE html>
<html>
<body>
<form>
<select id="mySelect" size="8">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
</form>
<br>
<p>Click the button to add a "Kiwi" option at the end of the dropdown list.</p>
<button type="button" onclick="myFunction()">Insert option</button>
<script>
function myFunction() {
var x = document.getElementById("mySelect");
var option = document.createElement("option");
option.text = "Kiwi";
x.add(option);
}
</script>
</body>
</html>
//remove() method
<!DOCTYPE html>
<html>
<body>
<form>
Select a fruit:
<br>
<select id="mySelect" size="4">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
</form>
<br>
<button onclick="myFunction()">Remove selected fruit</button>
<script>
function myFunction() {
var x = document.getElementById("mySelect");
x.remove(x.selectedIndex);
}
</script>
</body>
</html>
Here is the websites to test the codes:
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_select_add
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_select_remove
