[SOLUCIONADO] Select - Solo lectura

luna690 · #1 (**permalink**) 07/05/2012, 10:21

Hola!!
He estado buscando una respuesta a ésta pregunta, pero no he encontrado. Así que la vuelvo a formular.

¿Se puede hacer un "select" que sea de solo lectura?
Desabilitarlo no me sirve ya que necesito recoger los datos del mismo.

He intentado poner el select como readonly, pero de todas formas, me deja ver los valores que hay. He intentado poner un onkeypress="return false;" pero tampoco funciona. Sabeis alguna manera para no poder tocar el desplegable?

Saludos.

Dafonz · #2 (**permalink**) 07/05/2012, 10:29

Porque no lo deshabilitas e igualas el valor a un campo hidden, así a la hora de agarrar el valor agarras el del hidden y tienes tu select de "solo lectura"..

luna690 · #3 (**permalink**) 07/05/2012, 10:34

si, ya lo había pensado. Pero tengo como 6-7 campos select. Y sería ensuciar el código poniendo campos hidden, no?

caricatos · #4 (**permalink**) 07/05/2012, 10:50

Hola:

Cita:

Iniciado por luna690

si, ya lo había pensado. Pero tengo como 6-7 campos select. Y sería ensuciar el código poniendo campos hidden, no?

La otra opción sería "ensuciar" la semántica de un control cuyo sentido semántico es "seleccionar", y si no se puede seleccionar nada... se trata también de un juego sucio...

El evento que tendrías que usar es change (cambio), pero no creo que sea lo debido... tal vez, si lo que quieres es mostrar las otras posibles opciones, usar radios y deshabilitar los que no se puedan elegir... o un input readonly (creo que semanticamente es lo apropiado)

Saludos

luna690 · #5 (**permalink**) 07/05/2012, 10:59

Al final he "ensuciado" el código. Necesito selects para poder seleccionar (en el caso que el formulario sea para crear un nuevo "técnico".
Pero el select debe estar deseleccionado para que en el caso de modificar/visualizar el técnico no se pueda tocar. O en el caso que una persona no "usuaria" no pueda modificar ningún dato, solo visualizar (sin poder ver todas las otras opciones del select).

Código HTML:

<input type="hidden" readonly="readonly" name="hdd_paisos" id="hdd_paisos" value="<?php echo $inc_pais; ?>" />

 <td><?php echo $Generic_pais; ?></td> 
                <td>
                	<select name="cbo_paisos" onchange="document.formulari.hdd_paisos.value=this.value"
					<?php if($consulta==1){ ?> disabled="disabled" style="background-color:#CCC; color:#666;" <?php } ?> id="cbo_paisos" >
                    <?php while ($row = mysql_fetch_array($array_paisos)){ ?>
                        <option value="<?php echo $row['id']; ?>" 
                        <?php if ($inc_pais == $row['id']){ ?> selected="selected" <?php } ?> >
                        <?php echo htmlentities($row['nombre']); ?>
                        </option>
                    <?php } ?>
                    </select>
                </td>

Gracias por vuestra colaboración :)

emprear · #6 (**permalink**) 07/05/2012, 13:23

No sé si aún te haga falta, pero quizá esto te sirva

Código HTML:

Ver original<!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>
<title>Remover options</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
//<![CDATA[
/* script */
function removerIndices(opcion,indices,combo,actual){
  var cActual = document.getElementById(actual).value;
   // console.log('Valor actual: ', cActual);
  if((cActual != "") && (cActual == opcion )){
  var elSel = document.getElementById(combo);
  elSel.disabled = false;
  var borrar = indices.split('|');
  // console.log('borrar: ', borrar[0]);
  var i;
  var e=0;
for (e=0; e<=borrar.length;e++){
 
  for (i = elSel.length - 1; i>=0; i--) {
// console.log('El indice: ',elSel.options[i].value);
    if (elSel.options[i].value == borrar[e]) {
      elSel.remove(i);
    }
  }
  
}
  
}
}
//]]>
</script>
</head>
<body>
<form action="#">
<select id="select1" onchange="removerIndices('A','3|1|2','select2',this.id);">
<option value="" selected="selected">seleccione letra</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<br />
<select id="select2"  disabled="disabled" >
<option value="" selected="selected">seleccione número</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
</form>
</body>
</html>

Esta función basicamente hace lo siguiente, de acuerdo a las opción seleccionada en un select, elimina opciones de otro select

Los parámetros que pasa son
removerIndices(opcion,indices,combo,actual)
dónde
opción = El valor del select actual que cumple la condición
indices = son los indices del select en que se borrarán dichos indices, si son mas de uno se separan por |
combo = es el id del combo en que se borraran los indices
actual = es el id del combo que hace el onchange

En el ejemplo, al hacer onchange en el combo 1, si la opción seleccionada es A, se eliminan del combo 2 los option de los indices 1,2, y 3.
El tema del disabled/enabled es opcional y cualquier combo puede actuar sobre otro independientemente. No son exactamente selects dependientes en la forma tradicional. Faltaría agregar, si fuese necesario alguna modificación para que las opciones válidas del combo 1 que eliminan opciones del combo 2 sean más de una.
Y se podría incluso agregar opciones en lugar de eliminarlas

Saludos