Listas con opciones múltiples

Gabriel0702 · #1 (**permalink**) 21/05/2005, 09:37

Qué tal, lo que busco hacer es lo siguiente, tengo un formulario en una página con una lista en la que pueden seleccionar varias opciones, y quiero cómo es que se logra saber los valores que están seleccionados, el código de mi página es el siguiente:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento sin t&iacute;tulo</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_setTextOfTextfield(objName,x,newText) { //v3.0
  var obj = MM_findObj(objName); if (obj) obj.value = newText;
}
//-->
</script>
</head>

<body>
<form name="form1" method="post" action="">
  <table width="90%"  border="0" align="center">
    <tr>
      <td>Secciones a las que pertenece: </td>
      <td><select name="ListaSec" size="6" multiple id="ListaSec" onChange="MM_setTextOfTextfield('TextoSec','',ListaSec.value)">
        <option value="Guar">Guarder&iacute;a</option>
        <option value="Prees">Preescolar</option>
        <option value="Pri">Primaria</option>
        <option value="Sec">Secundaria</option>
        <option value="Prepa">Preparatoria</option>
        <option value="Uni">Universidad</option>
      </select></td>
    </tr>
    <tr>
      <td>Secciones en formato de texto: </td>
      <td><input name="TextoSec" type="text" id="TextoSec" size="50"></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>
</body>
</html>

lo que quiero hacer es algo así, por ejemplo, si selecciono la opción de guardería y además la de Universidad, que me aparezca en la caja de texto algo así: "GuarUni", si selecciono Primaria y Preparatoria, que me aparezca en la caja de texto algo así: "PriPrepa" y así para cada combinación de opciones que elija, cómo puedo hacer esto?, hasta ahora funciona pero sólo cuando selecciono una opción. Please ayuda.

JavierB · #2 (**permalink**) 21/05/2005, 09:43

Hola Gabriel0702

Pon así el select:

<select name="ListaSec" size="6" multiple id="ListaSec" onChange="MM_setTextOfTextfield(this)">

y usa esta función:

Código PHP:

  function MM_setTextOfTextfield(obj) {

  txt='';

  for(i=0;ele=obj.options[i];i++)

    if(ele.selected) txt+=ele.value;

  document.form1.TextoSec.value = txt;

}

Saludos,

Gabriel0702 · #3 (**permalink**) 21/05/2005, 09:56

Muchas Gracias JavierB, funciona a la perfección, te debo una. Ahora otra pregunta, cómo podría hacer por ejemplo si mando llamar a mi página así:

http://localhost/BiVi/Listas.php?Secciones=GuarPrees

para que se activaran los valores Guardería y Preescolar en mi lista. Si es muy complejo poner el código cuando se reciben datos por Get, entonces imagina que la cadena viene desde cualquier lado, o sea, en base a esa cadena ("GuarPrees") cómo podría hacer para que se activaran los valores de mi lista, me imagino que sería haciendo un ciclo que detectara las palabras que se encuentran en la cadena, eso sí podría hacerlo, de hecho tengo pensado hacerlo con PHP, pero una vez que tenga las opciones, cómo puedo hacer para que se muestren seleccionadas en la lista?, espero haber sido claro. Gracias anticipadas

Gabriel0702 · #4 (**permalink**) 21/05/2005, 10:26

Aquí está resuelto, la cadena la tomo de una palabra establecida por mí, ahora sólo me falta tomar la cadena de un origen distinto, como un GET, un POST o una consulta de datos. Aquí está el código

Código PHP:

 
<body>

<form name="form1" method="post" action="">

  <table width="90%"  border="0" align="center">

    <tr><?php $Cadena="GuarUni";?>

      <td>Secciones a las que pertenece: </td>

      <td><select name="ListaSec" size="6" multiple id="ListaSec" onChange="MM_setTextOfTextfield(this)">

        <option value="Guar" <?php if ((stripos($Cadena, "Guar"))!==false) {echo "SELECTED";} ?>>Guarder&iacute;a</option>

        <option value="Prees" <?php if ((stripos($Cadena, "Prees"))!==false) {echo "SELECTED";} ?>>Preescolar</option>

        <option value="Pri" <?php if ((stripos($Cadena, "Pri"))!==false) {echo "SELECTED";} ?>>Primaria</option>

        <option value="Sec" <?php if ((stripos($Cadena, "Sec"))!==false) {echo "SELECTED";} ?>>Secundaria</option>

        <option value="Prepa" <?php if ((stripos($Cadena, "Prepa"))!==false) {echo "SELECTED";} ?>>Preparatoria</option>

        <option value="Uni" <?php if ((stripos($Cadena, "Uni"))!==false) {echo "SELECTED";} ?>>Universidad</option>

      </select></td>

    </tr>

    <tr>

      <td>Secciones en formato de texto: </td>

      <td><input name="TextoSec" type="text" id="TextoSec" size="50"></td>

    </tr>

    <tr>

      <td>&nbsp;</td>

      <td>&nbsp;</td>

    </tr>

  </table>

</form>

</body>

Es sólo la parte que modifiqué, espero que como a mí, a uds también les sea de utilidad. Bye.