FUncion de Javascript

KonnaN · #1 (**permalink**) 17/06/2014, 15:20

Hola,

Tengo el siguiente codigo:
Se trata de una lista desplegable, como podréis comprobar.

Bien, todo funciona pero quiero añadir que:
Cuando seleccione por ejemplo Tierra-Camion- F-150 quiero que debajo aparezca un mensaje con un link que diga: "Has elegido F.150, pincha para ir a la pagina web."

Podéis ayudarme? Muchas gracias de antemano

EDITO: Me explico mejor. Lo que quiero es que en el HTML ponerle debajo de la tabla, otra fila más en la que poner el resultado con una funcion. Es decir que debajo del desplegable cuando elija las tres opciones me ponga: "Has elegido opcion1 + opcion2 + opcion3. Pincha para ver el modelo" Es posible hacerlo?

Código HTML:

Ver original<SCRIPT LANGUAGE="JavaScript">
 
<!-- Begin
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();
 
arrItems1[3] = "Camión";
arrItemsGrp1[3] = 1;
arrItems1[4] = "Tren";
arrItemsGrp1[4] = 1;
arrItems1[5] = "Coche";
arrItemsGrp1[5] = 1;
 
arrItems1[6] = "Barco";
arrItemsGrp1[6] = 2;
arrItems1[7] = "Submarino";
arrItemsGrp1[7] = 2;
 
arrItems1[0] = "Aviones";
arrItemsGrp1[0] = 3;
arrItems1[1] = "Ultraligero";
arrItemsGrp1[1] = 3;
arrItems1[2] = "Ala delta";
arrItemsGrp1[2] = 3;
 
var arrItems2 = new Array();
var arrItemsGrp2 = new Array();
 
arrItems2[21] = "747";
arrItemsGrp2[21] = 0
arrItems2[22] = "Cessna";
arrItemsGrp2[22] = 0
 
arrItems2[31] = "Kolb Flyer";
arrItemsGrp2[31] = 1
arrItems2[34] = "Kitfox";
arrItemsGrp2[34] = 1
 
arrItems2[35] = "Schwietzer Glider";
arrItemsGrp2[35] = 2
 
arrItems2[99] = "Chevy Malibu";
arrItemsGrp2[99] = 5
arrItems2[100] = "Lincoln LS";
arrItemsGrp2[100] = 5
arrItems2[57] = "BMW Z3";
arrItemsGrp2[57] = 5
 
arrItems2[101] = "F-150";
arrItemsGrp2[101] = 3
arrItems2[102] = "Tahoe";
arrItemsGrp2[102] = 3
 
arrItems2[103] = "Tren de carga";
arrItemsGrp2[103] = 4
arrItems2[104] = "Tren de pasajeros";
arrItemsGrp2[104] = 4
 
arrItems2[105] = "Contenedor de aceite";
arrItemsGrp2[105] = 6
arrItems2[106] = "Barco de pesca";
arrItemsGrp2[106] = 6
 
arrItems2[200] = "Los Angelas Class";
arrItemsGrp2[200] = 7
arrItems2[201] = "Kilo Class";
arrItemsGrp2[201] = 7
arrItems2[203] = "Seawolf Class";
arrItemsGrp2[203] = 7
 
function selectChange(control, controlToPopulate, ItemArray, GroupArray)
{
var myEle ;
var x ;
// Empty the second drop down box of any choices
for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
if (control.name == "firstChoice") {
// Empty the third drop down box of any choices
for (var q=myChoices.thirdChoice.options.length;q>=0;q--) myChoices.thirdChoice.options[q] = null;
}
// ADD Default Choice - in case there are no values
myEle = document.createElement("option") ;
myEle.value = 0 ;
myEle.text = "[Selecciona]" ;
controlToPopulate.add(myEle) ;
// Now loop through the array of individual items
// Any containing the same child id are added to
// the second dropdown box
for ( x = 0 ; x < ItemArray.length ; x++ )
{
if ( GroupArray[x] == control.value )
{
myEle = document.createElement("option") ;
myEle.value = x ;
myEle.text = ItemArray[x] ;
controlToPopulate.add(myEle) ;
}
}
}
// End -->
</script>
 
</HEAD>
 
 
 
<BODY style="font-family: Verdana">
 
<form name=myChoices>
<table align="center">
<tr>
<td>
<SELECT id=firstChoice name=firstChoice onchange="selectChange(this, myChoices.secondChoice, arrItems1, arrItemsGrp1);">
<option value=0 SELECTED>[Selecciona]</option>
<option value=1>Tierra</option>
<option value=2>Mar</option>
<option value=3>Aire</option>
</SELECT>
</TD><TD>
<SELECT id=secondChoice name=secondChoice onchange="selectChange(this, myChoices.thirdChoice, arrItems2, arrItemsGrp2);">
</SELECT>
<SELECT id=thirdChoice name=thirdChoice>
</SELECT>
</TD>
</TR>
</TABLE>
</form>

PHPeros · #2 (**permalink**) 18/06/2014, 08:14

Creo que necesitas hacer uso de la propiedad selectedIndex.

quitos · #3 (**permalink**) 18/06/2014, 10:59

Donde cierras la etiqueta de table agrega un div:

Código PHP:

  <div id="tuSeleccion"></div>

cuando haces el onchange del tercer Select mandas llamar una función: en donde obtienes el texto seleccionado de cada Select y lo concatenas:

Código PHP:

  function selecionar(){

    val_1=document.getElementById("firstChoice");

    var val1 = val_1.options[val_1.selectedIndex].text;

    val_2=document.getElementById("secondChoice");

    var val2 = val_2.options[val_2.selectedIndex].text;

    val_3=document.getElementById("thirdChoice");

    var val3 = val_3.options[val_3.selectedIndex].text;

    

    elTexto= "<strong>Has seleccionado:</strong> " + val1 + " - " + val2 + " - " + val3 ;

    document.getElementById("tuSeleccion").innerHTML= elTexto;

}

Despues la variable con los valores seleccionados, los pones dentro de un DIV llamado por el ID.

De tal manera que tu código queda de la siguiente manera:

Código PHP:

   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento sin título</title>

<SCRIPT LANGUAGE="JavaScript">

 

<!-- Begin

var arrItems1 = new Array();

var arrItemsGrp1 = new Array();

 

arrItems1[3] = "Camión";

arrItemsGrp1[3] = 1;

arrItems1[4] = "Tren";

arrItemsGrp1[4] = 1;

arrItems1[5] = "Coche";

arrItemsGrp1[5] = 1;

 

arrItems1[6] = "Barco";

arrItemsGrp1[6] = 2;

arrItems1[7] = "Submarino";

arrItemsGrp1[7] = 2;

 

arrItems1[0] = "Aviones";

arrItemsGrp1[0] = 3;

arrItems1[1] = "Ultraligero";

arrItemsGrp1[1] = 3;

arrItems1[2] = "Ala delta";

arrItemsGrp1[2] = 3;

 

var arrItems2 = new Array();

var arrItemsGrp2 = new Array();

 

arrItems2[21] = "747";

arrItemsGrp2[21] = 0

arrItems2[22] = "Cessna";

arrItemsGrp2[22] = 0

 

arrItems2[31] = "Kolb Flyer";

arrItemsGrp2[31] = 1

arrItems2[34] = "Kitfox";

arrItemsGrp2[34] = 1

 

arrItems2[35] = "Schwietzer Glider";

arrItemsGrp2[35] = 2

 

arrItems2[99] = "Chevy Malibu";

arrItemsGrp2[99] = 5

arrItems2[100] = "Lincoln LS";

arrItemsGrp2[100] = 5

arrItems2[57] = "BMW Z3";

arrItemsGrp2[57] = 5

 

arrItems2[101] = "F-150";

arrItemsGrp2[101] = 3

arrItems2[102] = "Tahoe";

arrItemsGrp2[102] = 3

 

arrItems2[103] = "Tren de carga";

arrItemsGrp2[103] = 4

arrItems2[104] = "Tren de pasajeros";

arrItemsGrp2[104] = 4

 

arrItems2[105] = "Contenedor de aceite";

arrItemsGrp2[105] = 6

arrItems2[106] = "Barco de pesca";

arrItemsGrp2[106] = 6

 

arrItems2[200] = "Los Angelas Class";

arrItemsGrp2[200] = 7

arrItems2[201] = "Kilo Class";

arrItemsGrp2[201] = 7

arrItems2[203] = "Seawolf Class";

arrItemsGrp2[203] = 7

 

function selectChange(control, controlToPopulate, ItemArray, GroupArray)

{

    var myEle ;

    var x ;

    // Empty the second drop down box of any choices

    for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;

    if (control.name == "firstChoice") {

        // Empty the third drop down box of any choices

        for (var q=myChoices.thirdChoice.options.length;q>=0;q--) myChoices.thirdChoice.options[q] = null;

    }

    // ADD Default Choice - in case there are no values

    myEle = document.createElement("option") ;

    myEle.value = 0 ;

    myEle.text = "[Selecciona]" ;

    controlToPopulate.add(myEle) ;

    // Now loop through the array of individual items

    // Any containing the same child id are added to

    // the second dropdown box

    for ( x = 0 ; x < ItemArray.length ; x++ )

    {

        if ( GroupArray[x] == control.value )

        {

            myEle = document.createElement("option") ;

            myEle.value = x ;

            myEle.text = ItemArray[x] ;

            controlToPopulate.add(myEle) ;

        }

    }

}

function selecionar(){

    val_1=document.getElementById("firstChoice");

    var val1 = val_1.options[val_1.selectedIndex].text;

    val_2=document.getElementById("secondChoice");

    var val2 = val_2.options[val_2.selectedIndex].text;

    val_3=document.getElementById("thirdChoice");

    var val3 = val_3.options[val_3.selectedIndex].text;

    

    elTexto= "<strong>Has seleccionado:</strong> " + val1 + " - " + val2 + " - " + val3 ;

    document.getElementById("tuSeleccion").innerHTML= elTexto;

}

// End -->

</script>

</head>

 
<body>

</body>

<form name=myChoices>

  <table align="center">

    <tr>

      <td><SELECT id=firstChoice name=firstChoice onchange="selectChange(this, myChoices.secondChoice, arrItems1, arrItemsGrp1);">

          <option value=0 SELECTED>[Selecciona]</option>

          <option value=1>Tierra</option>

          <option value=2>Mar</option>

          <option value=3>Aire</option>

        </SELECT></TD>

      <TD><SELECT id=secondChoice name=secondChoice onchange="selectChange(this, myChoices.thirdChoice, arrItems2, arrItemsGrp2);">

        </SELECT>

        <SELECT id=thirdChoice name=thirdChoice onchange="selecionar()" >

        </SELECT></TD>

    </TR>

  </TABLE>

  <div id="tuSeleccion"></div>

</form>

</html>