Lo que pasa es que intento realizar una función que pueda seleccionar un elemento de una selectlist en html pero los datos de la select list son introducidos por el usuario y no sé como realizarlo o arreglarlo (la función es la que dice aleatorio). Ahí está el html por si ahí está el error en esa parte del código. No sabría cómo arreglarlo.
function agregar(){
if (document.frm.txtNombre.value.length==0){
alert("No se permiten textos vacios")
}else{
var nuevoitem = document.frm.txtNombre.value;
var list = document.getElementById("selNombre");
var option= document.createElement("option");
list.options.add(option,0);
list.options[0].value=nuevoitem;
list.options[0].innerText=nuevoitem;
document.frm.txtNombre.value= "";
}
function aleatorio(){
var select = document.getElementById('selNombre');
var items = select.getElementsByTagName('option');
var index = Math.floor(Math.random() * items.length);
items[index].setAttribute('selected',true);
}
}
Este es el código en Html
<body>
<form name="frm" method="post">
<table>
<tr>
<td>Nombres:</td>
<td colspan="2">
<select name="selNombre" id="selNombre">
</select>
</td>
</tr>
<tr>
<td></td>
<td><input type="text" name="txtNombre"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Agregar Nombre" onclick="agregar()"></td>
</tr>
<tr><td></td>
<td><input type="button" value="Aleatorio" onclick="aleatorio()"></td>
</tr>
</table>
</form>
<div>
<a href="index.html">Volver</a>
</div>
</body>