Dropdown i flera nivåer

3 svar · 522 visningar · startad av Steve-O 27 apr. 2008

Steve-OMedlem sedan apr. 20082 inlägg

Frågan27 apr. 2008 13:38#1

Hej

Jag sitter med ett liten knepig sak för mitt kunnande (vilket inte är så omfattande)

Jag skulle vilja ha en sökfunktion i en expanderbar yta med "huvud-dropdown" som genererar "under-dropdowns" beroende på vad som valts i första läget. Dessutom ska bara dessa visas när de är aktuella.

Exempel:

1. Huvud-dropdown visar 4 val "Sverige, Norge, Danmark, Finland"
2. Om man väljer Sverige så skall nya dropdowner visas med ex "kungar", "sjöar" och "berg" under sökraden.
3. väljer man däremot Finland så skall bara 2 dropdowner dyka upp där en kan vara samma (ex sjöar) och den andra en annan (ex Presidenter)

Jag vill såklart att under-dropdowner dyker upp eller försvinner direkt när man väljer i huvud-dropdownen. (Det blir altså en tabell som ökar/minskar i höjd beroende på hur den fylls.

Se bifogad bild!

Allt detta är tänkt att längre fram fungera i ett ASP-script, men i dagsläget nöjer jag mig med lite hjälp om hur jag kan skapa en "dummy" i html så att jag kan jobba med design.

Tusen tack för all möjlig hjälp!

yadorMedlem sedan mars 2004455 inlägg

27 apr. 2008 20:18#2

Du måste nog använda dig av javascript eller något liknande för att kunna göra det. En liten sida som visar hur du kan göra typ:

<html>
<head>
<TITLE>muhahaha</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">

function createDropDownMeny(x,b)
{
	if(b == undefined)
		b = "";
	m = "<select" + b + ">";
	for(i=0;i<x.length;i++)
		m+="<option value=\"" +x[i].value + "\"" + ((x[i].selected)?" selected\"selected\"":"") + ">" + x[i].text + "</option>";
	return m + "</select>";
}

test = Array();
test[0] = {value:"a",text:"Titta här"}
test[1] = {value:"b",selected:true,text:"Först"}
test[2] = {value:"c",text:"Titta här"}
test[3] = {value:"d",text:"Titta här"}

data = Array();
data[0] = {
	value: "sverige",
	text:function(){
		str = " onchange=\"alert('Du valde: ' + this.value);\"";
		return "<h1>Kungar</h1>" + createDropDownMeny(test,str);
	}
}

data[1] = {
	value: "norge",
	text:function(){
		return "<h1>Sjöar</h1>" + createDropDownMeny(test) + createDropDownMeny(test);
	}
}

function change(x)
{
	for(a=0;a<data.length;a++)
		if(data[a].value == x.value)
			document.getElementById("fot").innerHTML = data[a].text();
}

window.onload = function()
{
	change(document.getElementById("lander"));
}

</script>
</head>
<body>
<form action="">
<select id="lander" onchange="change(this)">
<option value="sverige" selected="selected">Sverige</option>
<option value="norge">Norge</option>
</select>
<div id="fot">
</div>
</form>
</body>
</html>

Hoppas att den kan vara till hjälp!

Steve-OMedlem sedan apr. 20082 inlägg

27 apr. 2008 22:29#3

Det där var kanonbra hjälp.
Tusen tack!

Jag lyckas dock inte få ytan att minska och underkategorier att försvinna när man väljer ett annat värde i huvudvalet (typ danmark eller inget land) om det valet inte har några "underkategorier". (se sista bilden i min bifogade fil ovan)

Detta kanske är ett bra forum att rekrytera programmerare för kortare projekt... :OO
(Jag skulle behöva hitta någon som kan både skapa en sql-databas och programmera asp, samt diverse scriptkunskap för att lösa liknande funktioner som ovan.
På heltid kanske det kan ta 1-2 veckor. Någon som känner någon som är duktig, vill ha ett snabbprojekt och inte kräver konsultarvode?)

yadorMedlem sedan mars 2004455 inlägg

28 apr. 2008 17:57#4

Kom på en förbättring av scriptet:

<html>
<head>
<TITLE>muhahaha</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">

function createDropDownMeny(x,b)
{
	if(b == undefined)
		b = "";
	m = "<select" + b + ">";
	for(i=0;i<x.length;i++)
		m+="<option value=\"" +x[i].value + "\"" + ((x[i].selected)?" selected=\"selected\"":"") + ">" + x[i].text + "</option>";
	return m + "</select>";
}

var count = 0;
standard = Array();

standard[0] = {
	value: "none",
	text:"Välj här",
	selected:true,
	set:function(){
		return "Välj något land uppe i meny:n";
	}
}

standard[1] = {
	value: "sverige",
	text:"Sverige",
	set:function(){
		m =	"<h1>" + this.text + "</h1>" + createDropDownMeny(standard, " onchange=\"change(this, undefined, 'ex" + (++count) + "');\"") +
			"<br /><div id=\"ex"+ count + "\"></div>";
		return m;
	}
}

standard[2] = {
	value: "danmark",
	text:"Danmark",
	set:function(){
		return "Danmark:";
	}
}

function change(a,b,c)
{
	if(b == undefined)
		b = standard;
	if(c == undefined)
		c = "fot";
	reset = true;
	elm = document.getElementById(c);
	for(i=0;i<b.length;i++)
		if(b[i].value == a.value)
			eval("elm.innerHTML = b[i].set();reset=false;");
	if(reset)
		elm.innerHTML = "";
}
</script>
</head>
<body>
<form action="">
Meny:<script>document.write(createDropDownMeny(standard," id=\"lander\" onchange=\"change(this);\""));</script>
<div id="fot">
</div>
</form>
</body>
</html>

Detta script bör fungera som du vill, om du lägger till norge och finland i standard med mera. Eller?

Tänk dock på att vissa besökare har javascript avaktiverat så det är en ganska dålig lösning.