El objeto select II

Aquí encontraremos ejemplos de aplicación en los que se usarán propiedades de este objeto.

16.1 Ejemplos de aplicación

 

Trabajando con la propiedad disabled

Veremos el caso en que un usuario debe elegir un producto de una lista y la cantidad que desea comprar, de otra lista. Pero esto último, solo podrá hacerlo, si ya ha seleccionado un producto.

El Script...

 

<script languaje="javascript">

function habilitar(form)

{

    if (form.productos[0].selected == true)

    {

    form.cantidad.disabled = true;

    }

    else

    {

    form.cantidad.disabled = false;

    }

}

</script>

 

El formulario...

 

<form name="ejemplo1" method="POST" target="_blank" action="pagina.htm">

<select name="productos" onChange="habilitar(this.form)">

<option value="">[Seleccione un producto]</option>

<option value="COD 001">COD 001: Producto 1</option>

<option value="COD 002">COD 002: Producto 2</option>

<option value="COD 003">COD 003: Producto 3</option>

</select>

 

<select name="cantidad" disabled>

<option value="">[cantidad]</option>

<option value="5">5 unidades</option>

<option value="10">10 unidades</option>

<option value="15">15 unidades</option>

</select>

 

<input type="submit" value="Enviar"></form>

 

Los resultados...

 

Trabajando con el constructor new Option

Mediante este ejemplo, se generarán distintas opciones en la segunda lista dependiendo de la opción elegida en la primera.

El Script...

 

<script language="javascript">
function agregarOpciones(form)
{
var selec = form.tipos.options;
var combo = form.estilo.options;
combo.length = null;

    if (selec[0].selected == true)
    {
    var seleccionar = new Option("<-- esperando selección","","","");
    combo[0] = seleccionar;
    }

    if (selec[1].selected == true)
    {
    var popular1 = new Option("Rock de los 90","Rock1","","");
    var popular2 = new Option("Rock de los 80","Rock2","","");
    combo[0] = popular1;
    combo[1] = popular2;
    }

    if (selec[2].selected == true)
    {
    var academica1 = new Option("Musica del Barroco","Barroco","","");
    var academica2 = new Option("Musica del Siglo XX","Siglo XX","","");
    var academica3 = new Option("Música del Romantisismo","Romantico","","");
    combo[0] = academica1;
    combo[1] = academica2;
    combo[2] = academica3;
    }
}
</script>

 

El formulario...

 

<form name="ejemplo2" method="POST" target="_blank" action="pagina.htm">

<select name="tipos" onChange="agregarOpciones(this.form)">

<option value="">[seleccione una opción]</option>

<option value="musicapopular">Música Popular (Rock)</option>

<option value="musicaacademica">Música Académica</option>

</select>

 

<select name="estilo">

<option value=""><-- esperando selección</option>

</select>

 

<input type="submit" value="Enviar"></form>
 

Los resultados...

Validar un select

Como en los dos ejemplos anteriores, vimos que existen opciones que tienen un valor nulo (value=""). Se supone que ese tipo de opciones, no debe ser enviada en un formulario, ya que no tienen ese valor. Este ejemplo, verificará que la opción elegida, sea una opción válida.

El script...

 

<script languaje="javascript">

function validar(form)

{

 

    if (form.combo1.options[form.combo1.selectedIndex].value == "")

    {

    alert("Por favor, seleccione una opción válida");

    form.combo1.focus(); return true;

    }

form.submit();

}

</script>

 

El formulario...

 

<form name="ejemplo3" method="POST" target="_blank" action="pagina.htm">

<select name="combo1">

<option value=" ">[seleccione una opción]</option>

<option value="opcion1">Opción 1</option>

<option value="opcion2">Opción 2</option>

<option value="opcion3">Opción 3</option>

</select>

<input type="button" value="Enviar" onClick="validar(this.form)">

</form>

 

Los resultados...

Modificar la propiedad text de un option

Por algún motivo, puede resultar interesante modificar el texto de un option. Aquí veremos un ejemplo de como hacerlo.

El Script...

 

<script languaje="javascript">

function modificarTexto(form)

{

var selec = form.opciones.options;

 

    if (select[0].selected == true)

    { selec[0].text = "Esta no es una opción válida"; form.opciones.focus(); }

 

    else {

    select[form.opciones.selectedIndex].text = "Presione el botón enviar"; }

}

</script>

 

El formulario...

 

<form name="ejemplo4" method="POST" target="_blank" action="pagina.htm">
<select name="opciones" onChange="modificarTexto(this.form)">
<option value=" ">[seleccione una opción]</option>
<option value="opcion1">Opción 1</option>
<option value="opcion2">Opción 2</option>
<option value="opcion3">Opción 3</option>
</select>
<input type="submit" value="Enviar">
</form>

 

Los resultados...

Autor

Eugenia Bahit

Analista Programadora LAMP y Scrum Coach

Compartir

Comentarios

helder

16/6/2005
el articuloesta muy bueno pero me gustaria que me ayudaran con este problema
*********
tengo un problemas para adicionar options en un select desde una ventana hija en la cual hago una consulta y los situo con un javascript en unos textbox y un select que tengo en el padre. lo hago de diferentes maneras y de ninguna forma me adiciona al select.
********
function retornar(campo,valor,conta)
{
var valoption;
if(campo!=""){
if (opener.document.form1[campo].type=="select-one"){

valoption = new Option(valor,valor,"","");
window.parent.opener.document.form1[campo].options[conta]=valoption;
}
else
opener.document.form1[campo].value=valor;
}
}
</script>
le he quitado el document, el window.parent y tampoco
por favor ayuda....

Carlos Arias

02/2/2006
Esto no se puede hacer pero en PHP5?

Jime

27/2/2007
Por favor, necesito saber porque al poner disabled a un select name al grabar el valor q contiene en el value no me guarda.

Gracias

Ing. JorG Meneses

21/11/2007
Señores Desarrolloweb.com es un placer para mi decir que son ustedes un grupo excelente para el crecimiento, soporte y desarrollo de muchos programadores. Los felicito, sigan asi que son un grupo de trabajo increiblemente bueno. Éxitos para este año 2008.

joanpa

01/12/2007
Tengo problemas para almacernar en bases de datos el resultado del new option, no lo toma el metodo post de php.
les agradeceria que me pudieran colaborar.

juan pablo

06/3/2009
Hola me pueden decir como mando a llamar un elemento de un objeto select, es decir, al momento que seleccione el objeto, que en un text me aparezca algo.
Gracias

ed

03/4/2009
y si le quiero agregar un id a cada opcion, porque ya intente con setattribute y no me funciono, y no he encontrado como

Paulo Arieu

14/9/2009
problema con chrome
Hola.tengo un problema con chrome:
quiero hacer esto:
document.getElementById("pais").options[ <? echo($idpais) ?> ].selected= true ;
document.getElementById("sexo").value= "<? echo($sexo) ?>";

En Chrome no funciona.No pasa nada.
Podrian ayudarme?
Saludos y espero su respuesta

Nicolás Arce

26/4/2013
"Trabajando con el constructor new Option"
Hola me gustaria saber como lo puedo hacer para hacer eso pero en cadena, con mas de 2 y uno seguido de otro.<br />
Saludos.

eduardo

21/4/2014
que nombre lleva el segundo script en el ejemplo 2
hola que tal tengo una duda que nombre lleva el segundo script en el ejemplo 2
es que soy nuevo en programacion¡¡¡¡ me podrian decir se los agradeceria
saludos¡¡¡

Abraham

20/10/2014
Ayuda
Estoy tratando de hacerlo con 3 combos y no me sale el ultimo combo, podrian ayudarme