Sobre los items existentes, ¿de qué manera podría añadir alguno nuevo (valor nuevo, contenido nuevo y posición) introduciendo datos en estos campos y al hacer click sobre "nuevo item"? Solo he conseguido añadirlos al option "manualmente", pero no de esta forma que se me pide (la función es la última, newItem())
/*****************************************************************************************************************************************************************************************************************************************************************************************************************************************/
<!DOCTYPE html>
<html><head>
<meta charset=utf-8 />
<title>JS DOM - Eliminar elementos del DOM</title>
</head>
<body>
<form>
<select id="colorSelect">
<option value=”1”>Uno</option>
<option value=”2”>Dos</option>
<option value=”3”>Tres</option>
</select>
<a href="javascript:delItemSelected()">Elimina el item seleccionado</a>
<a href="javascript:delAllItems()">Vacía el desplegable</a>
<a href="javascript:resetItems()">Reset desplegable</a>
<hr>
Valor: <input type="text" name="valor_nuevo" value="">
Contenido: <input type="text" name="contenido_nuevo" value="">
Posición: <input type="text" name="posicion" value="">
<a href="javascript:newItem()">Nuevo item</a>
</form>
<script>
function delItemSelected(){
var seleccionado=document.getElementById("colorSelect");
seleccionado.remove(seleccionado.selectedIndex);
}
function delAllItems(){
var borrarTodos=document.getElementById("colorSelect");
var elementos=3;
for(var i=0;i<elementos;i++){
borrarTodos.remove(elementos.selectedIndex);
}
}
function resetItems(){
var borrarTodos=document.getElementById("colorSelect");
var elementos=3;
for(var i=0;i<elementos;i++){
borrarTodos.remove(borrarTodos.selectedIndex);
}
var arrayVacio=[];
for(var i=0;i<3;i++){
arrayVacio[i]=document.createElement("option");
}
for(var i=0;i<3;i++){
switch(i){
case 0: arrayVacio[i].innerHTML="Uno";
break;
case 1: arrayVacio[i].innerHTML="Dos";
break;
case 2: arrayVacio[i].innerHTML="Tres";
break;
}
borrarTodos.appendChild(arrayVacio[i]);
}
}
function newItem(){
var nuevo=document.createElement("option");
var option=document.createTextNode("Cuatro");
/*var option=document.getElementsByName("contenido_nuevo")[0].value;
document.getElementById("colorSelect").innerHTML=option;*/
nuevo.appendChild(option);
document.getElementById("colorSelect").appendChild(nuevo);
}
</script>
</body>
</html>