Foros del Web » Programando para Internet » Javascript »

FUncion de Javascript

 Estas en el tema de FUncion de Javascript en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/06/2014, 15:20
Avatar de KonnaN  
Fecha de Ingreso: diciembre-2009
Ubicación: Madriles
Mensajes: 214
Antigüedad: 14 años, 4 meses
Puntos: 6
FUncion de Javascript
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
  1. <SCRIPT LANGUAGE="JavaScript">
  2.  
  3. <!-- Begin
  4. var arrItems1 = new Array();
  5. var arrItemsGrp1 = new Array();
  6.  
  7. arrItems1[3] = "Camión";
  8. arrItemsGrp1[3] = 1;
  9. arrItems1[4] = "Tren";
  10. arrItemsGrp1[4] = 1;
  11. arrItems1[5] = "Coche";
  12. arrItemsGrp1[5] = 1;
  13.  
  14. arrItems1[6] = "Barco";
  15. arrItemsGrp1[6] = 2;
  16. arrItems1[7] = "Submarino";
  17. arrItemsGrp1[7] = 2;
  18.  
  19. arrItems1[0] = "Aviones";
  20. arrItemsGrp1[0] = 3;
  21. arrItems1[1] = "Ultraligero";
  22. arrItemsGrp1[1] = 3;
  23. arrItems1[2] = "Ala delta";
  24. arrItemsGrp1[2] = 3;
  25.  
  26. var arrItems2 = new Array();
  27. var arrItemsGrp2 = new Array();
  28.  
  29. arrItems2[21] = "747";
  30. arrItemsGrp2[21] = 0
  31. arrItems2[22] = "Cessna";
  32. arrItemsGrp2[22] = 0
  33.  
  34. arrItems2[31] = "Kolb Flyer";
  35. arrItemsGrp2[31] = 1
  36. arrItems2[34] = "Kitfox";
  37. arrItemsGrp2[34] = 1
  38.  
  39. arrItems2[35] = "Schwietzer Glider";
  40. arrItemsGrp2[35] = 2
  41.  
  42. arrItems2[99] = "Chevy Malibu";
  43. arrItemsGrp2[99] = 5
  44. arrItems2[100] = "Lincoln LS";
  45. arrItemsGrp2[100] = 5
  46. arrItems2[57] = "BMW Z3";
  47. arrItemsGrp2[57] = 5
  48.  
  49. arrItems2[101] = "F-150";
  50. arrItemsGrp2[101] = 3
  51. arrItems2[102] = "Tahoe";
  52. arrItemsGrp2[102] = 3
  53.  
  54. arrItems2[103] = "Tren de carga";
  55. arrItemsGrp2[103] = 4
  56. arrItems2[104] = "Tren de pasajeros";
  57. arrItemsGrp2[104] = 4
  58.  
  59. arrItems2[105] = "Contenedor de aceite";
  60. arrItemsGrp2[105] = 6
  61. arrItems2[106] = "Barco de pesca";
  62. arrItemsGrp2[106] = 6
  63.  
  64. arrItems2[200] = "Los Angelas Class";
  65. arrItemsGrp2[200] = 7
  66. arrItems2[201] = "Kilo Class";
  67. arrItemsGrp2[201] = 7
  68. arrItems2[203] = "Seawolf Class";
  69. arrItemsGrp2[203] = 7
  70.  
  71. function selectChange(control, controlToPopulate, ItemArray, GroupArray)
  72. {
  73. var myEle ;
  74. var x ;
  75. // Empty the second drop down box of any choices
  76. for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
  77. if (control.name == "firstChoice") {
  78. // Empty the third drop down box of any choices
  79. for (var q=myChoices.thirdChoice.options.length;q>=0;q--) myChoices.thirdChoice.options[q] = null;
  80. }
  81. // ADD Default Choice - in case there are no values
  82. myEle = document.createElement("option") ;
  83. myEle.value = 0 ;
  84. myEle.text = "[Selecciona]" ;
  85. controlToPopulate.add(myEle) ;
  86. // Now loop through the array of individual items
  87. // Any containing the same child id are added to
  88. // the second dropdown box
  89. for ( x = 0 ; x < ItemArray.length ; x++ )
  90. {
  91. if ( GroupArray[x] == control.value )
  92. {
  93. myEle = document.createElement("option") ;
  94. myEle.value = x ;
  95. myEle.text = ItemArray[x] ;
  96. controlToPopulate.add(myEle) ;
  97. }
  98. }
  99. }
  100. // End -->
  101. </script>
  102.  
  103. </HEAD>
  104.  
  105.  
  106.  
  107. <BODY style="font-family: Verdana">
  108.  
  109. <form name=myChoices>
  110. <table align="center">
  111. <tr>
  112. <td>
  113. <SELECT id=firstChoice name=firstChoice onchange="selectChange(this, myChoices.secondChoice, arrItems1, arrItemsGrp1);">
  114. <option value=0 SELECTED>[Selecciona]</option>
  115. <option value=1>Tierra</option>
  116. <option value=2>Mar</option>
  117. <option value=3>Aire</option>
  118. </SELECT>
  119. </TD><TD>
  120. <SELECT id=secondChoice name=secondChoice onchange="selectChange(this, myChoices.thirdChoice, arrItems2, arrItemsGrp2);">
  121. </SELECT>
  122. <SELECT id=thirdChoice name=thirdChoice>
  123. </SELECT>
  124. </TD>
  125. </TR>
  126. </TABLE>
  127. </form>
__________________
Si tienes un problema e intentamos ayudarte, coméntanos la solución si no la conseguimos.
Última edición por KonnaN; 18/06/2014 a las 05:19
  #2 (permalink)  
Antiguo 18/06/2014, 08:14
Colaborador
  
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 8 meses
Puntos: 578
Respuesta: FUncion de Javascript
Creo que necesitas hacer uso de la propiedad selectedIndex.
  #3 (permalink)  
Antiguo 18/06/2014, 10:59
Avatar de quitos  
Fecha de Ingreso: junio-2004
Mensajes: 119
Antigüedad: 19 años, 10 meses
Puntos: 1
De acuerdo Respuesta: FUncion de Javascript
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> 

Etiquetas: funcion, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 22:53.