Select editable

pijitu · #1 (**permalink**) 13/08/2010, 06:21

Hola gente, tengo un pequeño problema.

Necesito un select que se puede editar como si fuese un caja de texto al seleccionar una determinada opcion.

Ej:
<select>
<option>opcion 1</option>
<option>opcion 2</option>
...
<option>otra opcion</option>
<select>

Al seleccionar "otra opcion" que aparezca una caja de texto en el lugar donde estaba el select para cargar otro valor.

Espero que se pueda.

Gracias

karliky · #2 (**permalink**) 13/08/2010, 07:03

Se puede con Javascript.
Algo así como OnChange llamar a una funcion que añada un text area debajo del codigo html donde se encuentra el select.

Esto es el foro de PHP

pijitu · #3 (**permalink**) 13/08/2010, 07:09

Cita:

Iniciado por karliky

Se puede con Javascript.
Algo así como OnChange llamar a una funcion que añada un text area debajo del codigo html donde se encuentra el select.

Esto es el foro de PHP

Y tenes algun ejemplo para mostrarme?

Gracias

pateketrueke · #4 (**permalink**) 13/08/2010, 07:54

Cita:

Iniciado por pijitu

Y tenes algun ejemplo para mostrarme?

Gracias

no es cosa simple de verdad.... en primero lugar, el tema esta fuera de sitio....

y en segundo lugar, no es pan comido.... así que lo mejor es que investigues por tu cuenta y, ¿que tanto sabes de Javascript?

pues no hay código mágicos que copies y pegues para que funcionen... y bueno, ¿que tanto sabes manipular el DOM?

etc, etc...

Sirrohan · #5 (**permalink**) 13/08/2010, 08:00

Yo lo hago implementando una base de datos, en una página aparte llenas los datos que quieres mostrar en el select, y en la otra simplemente muestras esos datos.

Cita:

<select size="1" id="campo" name="campo">
<option value="none">Seleccione un valor</option>
<?
include ("conexion_bd.php");
$i=1;
$Conecta2 = new Conexion_bd();
$Conecta2->Gestion("SELECT * FROM tabla ");
while ($reg = mysql_fetch_array($Conecta2->Query)){
?>
<option value="<?= $reg[0]; ?>"><? echo $reg[1];?></option>
<? $i++;
}
?>

Dentro de conexion_bd.php

Cita:

<?php

class Conexion_bd {
var $Query;
var $C;
var $Link;

function Error(){
echo mysql_error();
}

function Conexion_bd(){
$Server = "servidor";
$User = "usuario"; //configura un usuario para esta base de datos
$Password = "tucontraseña";
$Database = "basedatos";
$Result = true;

if (!$this->Link = mysql_connect($Server, $User, $Password)){
$Result = false;
}

if (!mysql_select_db($Database, $this->Link)){
$Result = false;
}
return $Result;
}
function Gestion($Gestion){
$Result = true;
if ($this->Query = mysql_query($Gestion, $this->Link)){
if (strpos($Gestion, "ELECT") == 1) { //Cuando la gestion es ELIMINAR o INSERTAR no se cuenta nada, solo cuando es un SELECT se cuentan los elementos que se seleccionaron
$this->C = mysql_num_rows($this->Query);
}
}else{
$this->Error();
$Result = false;
}
return $Result;
}

function Close(){
mysql_close($this->Link);
}
}

?>

Sirrohan · #6 (**permalink**) 13/08/2010, 08:29

Te voy a colgar un ejemplo, es implementando Javascript, PHP y Mysql. Espero que te sirva. el contenido de conexion_bd.php lo tienes en el post anterior

Código HTML:

<html>
<head>
<?php
/*------------------------------------------------------------------*
'|  PROYECTO: Precios de estancia en playas de Barcelona
'|  ARCHIVO: index.php
'|  FECHA: 10/05/2009
'|  PARTE DEL PROYECTO: selector de playas
'|  AUTOR: Hiram Loreto
'+------------------------------------------------------------------*/

include ("conexion_bd.php");

$Conecta = new Conexion_bd();
$Conecta->Gestion("SELECT id_playa, playa, precio FROM playas ORDER BY id_playa");
?>

<script language = "JavaScript" type="text/javascript">
<!-- 

//mezclamos javascript con php

// Funcion para los precios de las playas
function segunda_lista(playa) {
//mediante etiquetas php creamos el bucle que recorre la tabla
	<?
	 while ($Rows = mysql_fetch_array($Conecta->Query)){
	?>
	//mediante etiquetas php asignamos valor a las variables javascript
		precio = "<?= $Rows["precio"]; ?>";
		idplaya = "<?= $Rows["id_playa"]; ?>";
		//comprobamos que sea la playa elegida y le damos el precio
		if (idplaya == playa) {
		  form1.precio_playa.value=precio;
		  form1.precio_total.value=eval(form1.dias.value*precio);
		 }
		<?
	 }
	?>
}

//Si el usuario cambia el numero de dias recalculamos el valor
function cambio_dias () {
  form1.precio_total.value=eval(form1.dias.value*form1.precio_playa.value);
}

 -->
</script>
</head>
<body>
<h3 align="center"><strong>Seleccione playa, dias y precios:</strong></h3>
<form id="form1" name="form1" method="post" action="index.php">
<table width="60%" border="0" cellpadding="3" cellspacing="1" align="center">
  <tr>
	<td align="left" colspan="2">
	  Playa: &nbsp;</td>
	<td align="left" colspan="6">
	  <select size="1" id="playa" name="playa" onchange = "javascript:segunda_lista(playa.value);">
	  <option value="none">Seleccione una playa</option>
	  <? 
			$Conecta2 = new Conexion_bd();
			$Conecta2->Gestion("SELECT id_playa, playa, precio FROM playas ORDER BY id_playa");
			while ($Rows = mysql_fetch_array($Conecta2->Query)){
	  ?>
	  <option value="<?= $Rows["id_playa"]; ?>"><?= $Rows["playa"]; ?></option>
	  <?
			}
	  ?>
	</select>
	</td>
  </tr>
	<tr>
	<td colspan="2" align="left" bgcolor="#CCCCCC">Días: &nbsp;</td>
	<td colspan="6" align="left" bgcolor="#CCCCCC">
	  <input type="text" id="dias" name="dias" size="10" value="7" onchange = "javascript:cambio_dias();"> (Estancia mínima 7 días)
	</td>
  </tr>  
	<tr>
	<td colspan="2" align="left">Precio: &nbsp;</td>
	<td colspan="6" align="left">
	  <input type="text" id="precio_playa" name="precio_playa" size="10" disabled="disabled"> (por día)
	</td>
  </tr>
	<tr>
	<td colspan="2" align="left" bgcolor="#CCCCCC">Precio total estancia: &nbsp;</td>
	<td colspan="6" align="left" bgcolor="#CCCCCC">
	  <input type="text" id="precio_total" name="precio_total" size="10" disabled="disabled"> (por día)
	</td>
  </tr>
  <tr>
	<td colspan="8" align="center"><input type="submit" name="pedir" value="Solicitar" /></td>
  </tr>
</table>
</form>
</body>
</html>

Y este sería el SQL

Código:

# MySQL-Front 3.2  (Build 14.3)

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES latin1 */;
/*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */;
/*!40103 SET TIME_ZONE='SYSTEM' */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE */;
/*!40101 SET SQL_MODE='STRICT_TRANS_TABLES,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES */;
/*!40103 SET SQL_NOTES='ON' */;


# Host: localhost    Database: prueba_playas
# ------------------------------------------------------
# Server version 5.0.67-community-nt

DROP DATABASE IF EXISTS `prueba_playas`;
CREATE DATABASE `prueba_playas` /*!40100 DEFAULT CHARACTER SET latin1 COLLATE latin1_spanish_ci */;
USE `prueba_playas`;

#
# Table structure for table playas
#

CREATE TABLE `playas` (
  `id_playa` int(11) unsigned NOT NULL auto_increment,
  `playa` varchar(75) collate latin1_spanish_ci default NULL,
  `precio` double(11,2) unsigned default NULL,
  PRIMARY KEY  (`id_playa`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1 COLLATE=latin1_spanish_ci;

#
# Dumping data for table playas
#

LOCK TABLES `playas` WRITE;

INSERT INTO `playas` VALUES (1,'playa 1',25.56);
INSERT INTO `playas` VALUES (2,'playa 2',3.99);
INSERT INTO `playas` VALUES (3,'playa 3',15.67);
INSERT INTO `playas` VALUES (4,'playa 4',18.5);
INSERT INTO `playas` VALUES (5,'playa 5',199.99);
INSERT INTO `playas` VALUES (6,'playa 6',201);

UNLOCK TABLES;

/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;
/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40103 SET TIME_ZONE=@OLD_TIME_ZONE */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

pijitu · #7 (**permalink**) 13/08/2010, 10:54

Gracias por responder tan rapido.

Voy a probar lo que me recomiendan y aviso que onda.

Muchas gracias

pijitu · #8 (**permalink**) 16/08/2010, 07:51

Código HTML:

Ver original<html>
 
<head>
<script type="text/javascript">
<!--
function cambiaTexto(c,o){
    c.options[c.selectedIndex].text = o.value
    o.style.display = 'none'
    c.style.display = 'inline'
}
function cambiaCampo(c,o,v){
    if(o.selectedIndex>0){
        o.style.display = 'none'
        c.style.display = 'inline'
        c.value = v
        c.focus()
    }
}
//-->
</script>
</head>
<body>
<form>
    <span id="selector">
    <input type="text" name="cTexto" style="display: none"  onblur="cambiaTexto(this.form.cSelect,this)" />
    <select name="cSelect" onchange="cambiaCampo(this.form.cTexto,this,this.options[this.selectedIndex].text)">
        <option>Selecciones una opción</option>
        <option>Primera 1</option>
        <option>Primera 2</option>
        <option>Primera 3</option>
        <option>Primera 4</option>
        <option>Escriba otra opcion</option>
    </select>
    </span>
</form>
</body>
</html>

Eso lo encontre el otro dia y es lo que busco, el problema es que al select lo genero con los resultados de una consulta y deberia ser un array (ej: select name="select[]") pero al hacerlo asi no anda.

Como no tengo ni idea de javascript pido ayuda.

Si alguno entiende la funcion y me puede dar una mano le agradeceria.

pijitu · #9 (**permalink**) 16/08/2010, 11:17

Ya esta solucionado, al final pude adaptar el codigo que habia encontrado a mi gusto.

Muchas gracias.