Problema con delle Select e il valore iniziale

**gaberiele** · 02-01-2012, 19:28

Ciao a tutti, ho trovato online delle select in ajax per regioni, province e città, funziona ma potrebbe farlo meglio.

Nella select della regione viene visualizzata la scritta Scegli Regione, mentre nelle altre 2 select non viene visualizzata questa scritta ma direttamente le provincie e le città.

Non riesco a far comparire quella scritta.

vi posto il codice.

file: index.html

codice:

<!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=UTF-8">
<title>Esempio liste di selezione in cascata</title>
<script type="text/javascript" src="lists.js"></script>
<style type="text/css">
body {
	font-family: verdana, sans-serif;
	font-size: 9pt;
}
select {
	width: 200px;
	margin: 5px 0;
}
fieldset {
	border: 1px solid #d0d0d0;
	padding: 5px;
	width: 220px;
}
</style>
</head>
<body>
<form action="index.html" method="post">
<fieldset>
<label for="regioni">Regioni</label>

<select name="regioni" id="regioni" onchange="loadList('province', getSelected(this))" >
</select>

<label for="province">Province</label>

<select name="province" id="province" onchange="loadList('comuni', getSelected(this))" >
</select>


<label for="comuni">Comuni</label>

<select name="comuni" id="comuni">
</select>


<input type="submit" name="submit" value="Invia" />
</fieldset>
</form>

<script type="text/javascript">
//<![CDATA[
loadList('regioni', 0);
//]]>
</script>


</body>
</html>

file: request.php

codice:

<?php
require 'dbconfig.php';
$conn = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD) or die;
mysql_select_db(DB_NAME) or die;
//I valori in input vanno verificati
//id deve essere un valore numerico
$pid = (int)$_REQUEST['id'];

//maschera  eventuali caratteri speciali in table 
$tb = mysql_real_escape_string($_REQUEST['table'], $conn);

switch($tb) {
	case 'regioni':
		$sql="SELECT id, nome FROM `$tb` ORDER BY nome";
		break;
	case 'province':
		$sql="SELECT id, nome FROM `$tb` WHERE id_regione=$pid ORDER BY nome";
		break;
	case 'comuni':
		$sql="SELECT id, nome FROM `$tb` WHERE id_provincia=$pid ORDER BY Principale, Nome";
		break;	
}
//Il primo elemento della risposta è il nome della tabella (= attributo ID del tag select)


$out="$tb;";
if($result = mysql_query($sql, $conn)) {
	while ($row = mysql_fetch_row($result)) {
		$out .= $row[0] . '|' . $row[1] . ';';
	}
}
//Rimuove il carattere ; in coda
echo rtrim($out, ';');
?>

file: lists.js

codice:

 
var xmlHttp = getXmlHttpObject();

function loadList(tb, id){
xmlHttp.open('GET', 'request.php?table='+tb+'&id='+id, true);
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.send(null);
}
function addOption(select, value, text) {
	//Aggiunge un elemento <option> ad una lista <select>
	var option = document.createElement("option");
	option.value = value,
	option.text = text;
	try {
		select.add(option, null);
	} catch(e) {
		//Per Internet Explorer
		select.add(option);
	}
}
function getSelected(select) {
	//Ritorna il valore dell'elemento <option> selezionato in una lista
	return select.options[select.selectedIndex].value;
}
function stateChanged() {
	if(xmlHttp.readyState == 4) {
		//Stato OK
		if (xmlHttp.status == 200) {
			var resp = xmlHttp.responseText;
			
			if(resp) {
				//Le coppie di valori nella striga di risposta sono separate da ;
				var values = resp.split(';');
				//Il primo elemento è l'ID della lista.
				var listId = values.shift();
				var select = document.getElementById(listId);
				//Elimina i valori precedenti
				while (select.options.length) {
					select.remove(0);
				} 
				
				if(listId == 'regioni') {
					addOption (select, 0, '-- Selezionare regione --');
				}
				
				
				var limit = values.length;
				
				for(i=0; i < limit; i++) {
					var pair = values[i].split('|');
					//aggiunge un elemento <option>
					addOption(select, pair[0], pair[1]);
				}
				
				
								
			}
		} else {
			alert(xmlHttp.responseText);
		}
	}
}

function getXmlHttpObject()
{
  var xmlHttp=null;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    }
  return xmlHttp;
}

Aiutatemi per favore a capire cosa devo modificare, perchè tutte le modifiche che ho tentano non hanno prodotto nulla.

**cavicchiandrea** · 02-01-2012, 19:56

Inserisci un alert(listId) prima di queste righe
if(listId == 'regioni') {
addOption (select, 0, '-- Selezionare regione --');
}
se nel alert leggi la parole "province" e "comuni" ti basta aggiungere else if come quello delle regioni, se non stampa nulla devi modifica il php in modo che restituisca il dato

**gaberiele** · 03-01-2012, 02:30

grazie tante, ora va bene, ho dovuto mettere degli if concatenati e non separati.

Discussione: Problema con delle Select e il valore iniziale

Strumenti discussione

Ricerca discussione

Visualizza

Problema con delle Select e il valore iniziale

Permessi di invio