Immagini in seòect box popolata da query

Monital · 2013-08-11T18:13:06+0200

Buonasera,

Ho fatto delle ricerche ed a quanto pare in html quello che vorrei fare è impossibile.

Mi rivolgo a voi nel caso qualcuno abbia qualche idea su come superare l'ostacolo.

Il quesito è molto smplice. Ho una select che si popola in maniera dinamica da una query ora vicino ai singoli nomi vorrei far apparire un immagine ma con il semplice html non funge

il codice è questo

PHP:

$sql="SELECT * FROM table";
$result = mysql_query($sql);
while($riga=mysql_fetch_array($result)){
$id=$riga['ID'];
$nome=$riga['Nome'];
echo  "<option value=\"$nome\">$nome</option>"; 
}

a cui ho aggiunto

PHP:

$sql="SELECT * FROM table";
$result = mysql_query($sql);
while($riga=mysql_fetch_array($result)){
$id=$riga['ID'];
$nome=$riga['Nome'];
echo  "<option value=\"$nome\"><img src=\"http://miosito.com/img/".$id.".jpg\" whidth=\"10\" height=\"10\">$nome</option>"; 
}

ma non funge.

Suggerimenti?

magari qualche funzione in javascript?

borgo italia · 2013-08-11T19:05:19+0200

ciao
come stai tentando tu credo che non sia possibile.
prova questo usando i css e le immagini come background

PHP:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">
<!--
.opt{/*classe generale per le option*/
	background-repeat: repeat-x;/*si ripete per la larghezza della option*/
	background-size:100% 100%;/* qui puoi provare a dimensionare in px o dare es 10% 10%*/
	/*poi nelle option con style scegli l'immagine*/
}
-->
</style>
</head>
<body>
<?php
$sql="SELECT * FROM table";
$result = mysql_query($sql);
?>
<form action="#" method="post">
<select name="pinco" class="zero">
  <option value="">seleziona</option><!-- sulla prima option non viene l'immagine-->
<?php
while($riga=mysql_fetch_array($result)){
	$id=$riga['ID'];
	$nome=$riga['Nome']; 
	echo "<option value=\"$nome\" class=\"opt\" style=\"background-image: url(http://miosito.com/img/$id.jpg)\">uno</option>";
}
?>
</select>
</form>
</body>
</html>

è evidente che devi prepararti al meglio le immagini

Monital · 2013-08-11T19:21:42+0200

ok testato modificando la larghezza però in realtà come siv ede anche da backbround le immagini me le mette di sottofondo mentre io le volevo affiancate al singolo elemento della option.

ho dimenticato un particolare che mi era sfuggito e l'ho notato solo vedendo le immagini ripetute.

Le select box si creano in funzione di un for per tanti $x tante select quindi le immaigni oltre che vederle in sottofondo le vedo ripetute tante volte quanto $x

in realtà il codice completo è

PHP:

for($i=0;$i<$rc;$i++){
<form action="#" method="post">
<select name="pinco" class="zero">
  <option value="">seleziona</option><!-- sulla prima option non viene l'immagine-->
<?php
while($riga=mysql_fetch_array($result)){
    $id=$riga['ID'];
    $nome=$riga['Nome']; 
    echo "<option value=\"$nome\" class=\"opt\" style=\"background-image: url(http://miosito.com/img/$id.jpg)\">uno</option>";
} 
</select>
}

borgo italia · 2013-08-11T20:02:31+0200

ciao
tra il tag <select> e il </select> ci può stare solo il tag <option></option>
cioe non puoi fare es.
<img src="...."><option></option>
e nemmeno
<option><img src="...."></option>

comunque non ho capito una cosa, quel for($i=0;$i<$rc;$i++){: nella pagina fai più form? come fa poi a capire php quale option hai selezionato?

Monital · 2013-08-11T20:44:03+0200

il form lo apro prima del ciclo e poi la select ha come nome un array perchè a me serve che mi arrivino tutti i dati selezionati

PHP:

echo "<form>";
for($i=0;$i<$rc;$i++){
echo "<INPUT TYPE=\"text\" class=\"inputtext\" readonly=\"readonly\" id=\"input$i\" name=\"nomi[]\"   
VALUE=\"\" ONKEYUP=\"autoComplete(this,this.form.options,'value',true)\">";
echo "<SELECT NAME=\"options\"  class=\"select\" onChange=\"this.form.input$i.value=this.options[this.selectedIndex].value\">
<option value=\"\">-----------</option>
$sql="SELECT * FROM $table";
$result = mysql_query($sql);
while($riga=mysql_fetch_array($result)){//o mysql_fetch_assoc
$id=$riga['ID'];
$nome=$riga['Nome'];
echo  "<option value=\"$id\">$nome</option>";  
} 
echo "</select><br>";

mi sarebbe piaciuto che si vedeva un immagine per ogni singolo nome che usciva in lista.

Immagine che è collegata all'id del nome

ho notato che nemmeno nelle select multiple questo non è possibile mannaggia

borgo italia · 2013-08-12T08:31:54+0200

ciao
questo è il meglio vhe sono riuscito a ottenere

PHP:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">
<!--
.opt{/*classe generale per le option*/
	background-position: left center;
	background-color:#999999;
	background-repeat: no-repeat;
	background-size:30px 30px;
	height:34px;
	text-indent: 34px;/*qualche px in più del bck size*/
}
-->
</style>
</head>
<body>
<?php
if(isset($_POST['invia'])){
echo "<pre>";
var_dump($_POST['pinco']);
echo "</pre>";
}
//l'aaray puo essere sostituito dal db o da questo costruito
$im=array('criric'=>'hj.png','longo'=>'rubik.png', 'borgo'=>'miele.jpg');
?>
<form action="#" method="post">
<select name="pinco" class="zero">
  <option value="">seleziona</option><!-- sulla prima option non viene l'immagine-->
<?php
foreach($im as $nome => $file){
	//cartella da adattare
	$file="../../_emailBI/numeri/".$file;
	echo "<option value=\"$nome\" class=\"opt\" style=\"background-image: url($file)\">$nome</option>";
}
?>
</select>
<br>
<input name="invia" type="submit" id="invia" value="invia">
</form>
</body>
</html>

Monital · 2013-08-12T19:17:02+0200

mmh ho inziiato a mette giu qualcosa ma era troppo complciato così perchè l'option nel foreach non mi riconosceva più il nome.

Comunque sia come si dice:

L'importante non è come ci si arriva ma è arrivare" :quote::quote:

Scherzi a parte mi hai dato l'intuizione giusta. Rivedendo il tuo ultimo codice ho notato questo

PHP:

   background-repeat: no-repeat;

è bastato mettere quello e qualche spazio a nome ed è andata. Stupido a non pensarci prima no?

Grazie ancora ragassi.

borgo italia · 2013-08-12T19:55:08+0200

ciao
non dovrebbero servirti gli spazi oltre a no-repeat questo l'avevi notato

text-indent: 34px;/*qualche px in più del bck size*/

?
ti sposta il testo oltre l'immagine

Monital · 2013-08-14T18:08:35+0200

borgo italia ha scritto:
ciao
non dovrebbero servirti gli spazi oltre a no-repeat questo l'avevi notato

text-indent: 34px;/*qualche px in più del bck size*/

?
ti sposta il testo oltre l'immagine

GRANDE :beer::beer::beer::beer:

non l'avevo notato.

Sei ufficialmente il mio nuovo IDOLO

Cerca

Cerca

Immagini in seòect box popolata da query

Monital

Utente Attivo

borgo italia

Super Moderatore

Monital

Utente Attivo

borgo italia

Super Moderatore

Monital

Utente Attivo

borgo italia

Super Moderatore

Monital

Utente Attivo

borgo italia

Super Moderatore

Monital

Utente Attivo

Discussioni simili