Drop down i flera nivåer..

Tjenare!
För ett tag sedan såg jag en artikel på IDG om hur man kunde styra vad som skulle visas med hjälp av drop down-menyer.
Alltså om jag väljer Sverige så dykerdet upp en ny drop down med alla städer i Sverige och samma sak om jag väljer Norge.

Nu är det så att jag inte hittar den artikeln, är det någon som kan hjälpa mig med hur ett sång script ser ut?

Ska du ha den horizontell eller vertikal är första frågan!
Vet man det så är det lättare att hjälpa till.

Dom skall vara vertikala :)

SuckerTree!

Det var inte så jag menade.
I en drop down-meny finns olika alternativ.
Beroende på vilken jag väljer dyker det upp en ny meny under den med nya alternativ..
Hoppas ni förstår..

Kolla på javascriptade dropdownmenyer på http://www.hotscripts.com. Skulle inte förvåna mig om t.ex. https://www.dynamicdrive.com har når heller.

Svårt detta med att förklara en dropdown.
Ska det va nåt i stil med den jag har på min sida ?
Du kan ju kolla HÄR
Går att anpassa en del f.ö.

Satte ihop en liten klass/funktion. :)

function CountryCity(formName, countryFieldName, cityFieldName)
{
	var countryField;
	var cityField;
	var countryCity = {
		"England" : ["Liverpool", "London", "Manchester"],
		"Italien" : ["Rom", "Milano", "Turin"],
		"Spanien" : ["Barcelona", "Madrid", "Valencia", "Sevilla"],
		"Sverige" : ["Helsingborg", "Stockholm", "Göteborg", "Malmö"]
	}
	
	function load()
	{
		countryField = document.forms[formName][countryFieldName];
		cityField = document.forms[formName][cityFieldName];
		
		loadCountry();
	}
	
	function loadCountry()
	{
		for (var k in countryCity)
			countryField.options[countryField.options.length] = new Option(k, k);
		
		if (countryField.addEventListener)
			countryField.addEventListener("change", loadCity, false);
		else if (countryField.attachEvent)
			countryField.attachEvent("onchange", loadCity);
		
		loadCity();
	}
	
	function loadCity()
	{
		cityField.options.length = 0;
		
		var city = countryCity[countryField.options[countryField.selectedIndex].value];
		
		for (var i = 0; i < city.length; i++)
			cityField.options[i] = new Option(city[i], city[i]);
	}
	
	if (window.addEventListener)
		window.addEventListener("load", load, false);
	else if (window.attachEvent)
		window.attachEvent("onload", load);
}

Sen för att använda den:

<script type="text/javascript">
new CountryCity("frm", "country", "city");
</script>

<form name="frm">
	<select name="country">
	</select>
	<select name="city">
	</select>
</form>

Hjälpte det dig?

bossse skrev:

Svårt detta med att förklara en dropdown.
Ska det va nåt i stil med den jag har på min sida ?
Du kan ju kolla HÄR
Går att anpassa en del f.ö.

Jag tror han menade drop downs som genereras av själva webbläsaren/systemet. Gjorde nåt liknande för några år sedan med javascript. Väldigt omständiga historier, så koden är verkligen inget att skryta med. Men dom funkar galant och validerar. Börja ett köp här: http://visionary-world.com/bikes-vietnam-book-order.shtml och se vad som händer....
Är det nåt sånt?

Inte alls svårt att göra så att städerna inte visas om man inte valt något land.
Att använda Iframes för detta är inte en så snygg lösning. Räcker med bara JavaScript. Har man väldigt mycket länder och städer så skulle man kunna använda Ajax för att inte behöva ladda in allt på en gång.

Erik Juhlin skrev:

Satte ihop en liten klass/funktion. :)

function CountryCity(formName, countryFieldName, cityFieldName)
{
	var countryField;
	var cityField;
	var countryCity = {
		"England" : ["Liverpool", "London", "Manchester"],
		"Italien" : ["Rom", "Milano", "Turin"],
		"Spanien" : ["Barcelona", "Madrid", "Valencia", "Sevilla"],
		"Sverige" : ["Helsingborg", "Stockholm", "Göteborg", "Malmö"]
	}
	
	function load()
	{
		countryField = document.forms[formName][countryFieldName];
		cityField = document.forms[formName][cityFieldName];
		
		loadCountry();
	}
	
	function loadCountry()
	{
		for (var k in countryCity)
			countryField.options[countryField.options.length] = new Option(k, k);
		
		if (countryField.addEventListener)
			countryField.addEventListener("change", loadCity, false);
		else if (countryField.attachEvent)
			countryField.attachEvent("onchange", loadCity);
		
		loadCity();
	}
	
	function loadCity()
	{
		cityField.options.length = 0;
		
		var city = countryCity[countryField.options[countryField.selectedIndex].value];
		
		for (var i = 0; i < city.length; i++)
			cityField.options[i] = new Option(city[i], city[i]);
	}
	
	if (window.addEventListener)
		window.addEventListener("load", load, false);
	else if (window.attachEvent)
		window.attachEvent("onload", load);
}

Sen för att använda den:

<script type="text/javascript">
new CountryCity("frm", "country", "city");
</script>

<form name="frm">
	<select name="country">
	</select>
	<select name="city">
	</select>
</form>

Nu är det ju inte jag som startade tråden men jag är också intresserad av en sådan här kod. Kan man på något sätt koppla detta till en databas? Så att den hämtar alla länder och sedan alla städer alltså

Ja, det är bara att loopa ut all relevant information enligt

	var countryCity = {
		"England" : ["Liverpool", "London", "Manchester"],
		"Italien" : ["Rom", "Milano", "Turin"],
		"Spanien" : ["Barcelona", "Madrid", "Valencia", "Sevilla"],
		"Sverige" : ["Helsingborg", "Stockholm", "Göteborg", "Malmö"]
	}

Men om vi säger att jag har lagt in England i databasen. Om databasen ser ut så här:
id
land
stad

Hur gör man då för att endast alla städer som börjar på L från England ska visas? Jag är rätt newbie så försök hålla det på en lättförståelig nivå :)

Nu vet jag inte vilket serverspråk du använder, men med lite pseudokod kan det se ut så här:

print "var countryCity = {"

rs = SQL_Execute("select stad from tbl where land = 'England' and stad like 'L%'")

if not rs is eof:
  entry = "\"England\" : ["
  while not rs is EOF:
    entry = entry + "\"" + rs("stad") + "\","
    rs = rs.next
  end while

  // ersätt det sista kommatecknet med en höger hakparentes
  entry[entry.length - 2] = "]"
end if

if entry.length > 0:
  print entry
end if

print "}"

Typ :)