Dynamisk <select>

15 svar · 829 visningar · startad av Tulork 26 nov. 2007

TulorkMedlem sedan aug. 2004903 inlägg

26 nov. 2007 20:32#1

Har lite problem att få till en dynamisk drop down meny av typen "Väljer en kategori i ena menyn, då ändras värdena i den andra menyn"

Har provat en del script och har provat skriva själv... men det blir inget bra, plus att dem validerar inte för fem öre.

Yrkes kategorierna är statiska värden. Själva yrkena kommer skickas in från databas med php. Så värdet man skickar med när man väljer yrkeskategori, bestämmer vilka yrken som visas i den andra menyn.. så är det tänkt i alla fall. Illustrerar med en echo var jag kommer loopa ut yrkena.

Så här ser mitt formulär ut.

<form action="index.php?skicka" method="post">
<select class="select" name="kategori">
	<option value="">Välj yrkesområde</option>
	<option value="Administration">Administration</option>
	<option value="Bygg">Bygg &amp; Anläggning</option>
	<option value="Data">Data/IT</option>
	<option value="Drift">Drift &amp; Underhåll</option>
	<option value="Ekonomi">Ekonomi &amp; Finans</option>
	<option value="Forskning">Forskning/vetenskap</option>
	<option value="Forsaljning">Försäljning</option>
	<option value="Friskvard">Friskvård/Kroppsvård</option>
	<option value="Hantverkare">Hantverkare</option>
	<option value="Hotell">Hotell/Restaurang</option>
	<option value="Industri">Industri/Tillverkning</option>
	<option value="Juridik">Juridik</option>
	<option value="Media">Media/Kultur</option>
	<option value="Miljovard">Miljövård</option>
	<option value="Naturbruk">Naturbruk</option>
	<option value="Omsorg">Sjukvård/Omsorg</option>
	<option value="Pedagogiskt">Pedagogiskt arbete</option>
	<option value="Sakerhetsarbete">Säkerhetsarbete</option>
	<option value="Socialt">Socialt arbete</option>
	<option value="Teknik">Teknik</option>
	<option value="Transport">Transport</option>
</select>

<select class="select" name="yrken">
	<option value="">Välj yrke</option>
	<option value="<?php echo $yrke;?>"><?php echo $yrke;?></option>
</select>
</form>

HiDensityMedlem sedan dec. 20051 420 inlägg

26 nov. 2007 20:37#2

Nu är jag inte hundra på det här området så ta det jag säger med en nypa salt. ;)

För att kunna välja ett värde i en drop-down och sen fylla på värden i nästa drop-down så måste du väl antingen ladda om sidan (så att du kan exekvera php server-side) eller använda någon form av ajax-lösning för att hämta info från servern?

Om du inte hade tänkt att trycka in all data i ett javascript?

TulorkMedlem sedan aug. 2004903 inlägg

26 nov. 2007 20:40#3

Jag har inte låst mig vid något. har provat ett par olika lösningar. Hur som helst så måste den ena menyn hämta från databasen.. så om sidan måste laddas om så måste den väl det.

HiDensityMedlem sedan dec. 20051 420 inlägg

26 nov. 2007 22:46#4

Tulork skrev:

Jag har inte låst mig vid något. har provat ett par olika lösningar. Hur som helst så måste den ena menyn hämta från databasen.. så om sidan måste laddas om så måste den väl det.

Exakt vad är det du inte lyckas med eller inte vet hur man gör?

Du får nog bestämma dig för en lösning som passar dig och sen köra på den, fastnar du med den så kan du be om hjälp med något specifikt. Just nu är "frågan" lite väl bred för att man ska kunna hjälpa till.

TulorkMedlem sedan aug. 2004903 inlägg

26 nov. 2007 22:52#5

Vill på ett enkelt sätt fylla en meny med information från min databas, baserat på vad jag väljer i en annan meny. Javascript är inte min starka sida, och jag vet inte om det går att lista direkt eller om sidan måste laddas om.

Jag har inga script exempel eller något. Men jag har en känsla av att det inte är så fasligt svårt för den som jobbat lite med javascript.

Jag kan lösa det på flera andra sätt.. men inget som blir snyggt, överskådeligt eller bra. Två menyer, där en fylls upp med values baserat på vad man valde i den andra menyn är det jag är ute efter.

HiDensityMedlem sedan dec. 20051 420 inlägg

26 nov. 2007 22:59#6

Tulork skrev:

Jag har inga script exempel eller något. Men jag har en känsla av att det inte är så fasligt svårt för den som jobbat lite med javascript.

Alltså, grejen är att javascript är ett client-side script. Och du har informationen på servern. Så du kan inte använda enbart javascript för att lista den nya drop-down-menyn om du inte vill lägga in all data du har i javascriptet, men jag antar att det inte är något alternativ eftersom det troligtvis är rätt mycket data.

Antingen får du köra en POST i formuläret när den första drop-downen väljs och ladda om sidan eller posta till en annan php-fil som plockar fram nästa drop-down ur databasen. ELLER så måste du komplettera ditt javascript med Ajax som jag inte kan något alls om.

TulorkMedlem sedan aug. 2004903 inlägg

26 nov. 2007 23:07#7

Allt det du säger vet jag. Men så länge någon bara visar mig hur man löser javascript biten så fixar jag resten själv. Alltså... strunta i allt som har med PHP och databas att göra.

colioneMedlem sedan juni 20014 421 inlägg

26 nov. 2007 23:46#8

<!doctype html>

<select class="select" name="kategori" onchange="fillSelById(this.selectedIndex,'jobs')">
	<option value="0">Välj yrkesområde</option>
	<option value="1">Administration</option>
	<option value="2">Bygg &amp; Anläggning</option>
	<option value="3">Data/IT</option>
	<option value="4">Drift &amp; Underhåll</option>
	<option value="5">Ekonomi &amp; Finans</option>
	<option value="6">Forskning/vetenskap</option>
</select>

<select class="select" id="jobs">
<option value="">Inget valt</option>
</select>

<script type="text/javascript">
var jobs = [];
jobs[0] = ["Inget valt"];
jobs[1] = ["Lönenisse","Korvbagare"]; //Administration
jobs[2] = ["Snickare", "Gitarrstämmare","Stigbygel"]; //Bygg
jobs[3] = ["Nörd","Programmerare", "Flöjttillverkare", "Manickbyggare"]; //Data
jobs[4] = ["Serverkomiker"];
jobs[5] = ["Svartarbetare","Kommunalanställd"];
jobs[6] = ["Ingenjör","Politruck"];

function fillSelById(i,id) {
if (!(sel = document.getElementById(id)))
	return;

while (sel.hasChildNodes())
	sel.removeChild(sel.firstChild);

for (var j=0;j<jobs[i].length;j++)
	sel.appendChild(new Option(jobs[i][j],j));
	
}
</script>

Fattar du eller ska jag förklara? :)

TulorkMedlem sedan aug. 2004903 inlägg

27 nov. 2007 16:55#9

ser bra ut... men den funkar inte :) Den skiftar inte innehållet i menyn.

colioneMedlem sedan juni 20014 421 inlägg

27 nov. 2007 18:33#10

För mig funkar exemplet utan problem. Hur ser din kod ut?

TulorkMedlem sedan aug. 2004903 inlägg

27 nov. 2007 19:51#11

Så här ser länken ut

<div align="left" id="topmen"><span style="color:green; font-size:16px;">+ </span><a href="?skicka" class="green">Din referens hjälper andra!</a></div>

Så här ser det ut när jag uncludar (Ligger i inom body)

if(isset($_GET['skicka'])){
include "skicka.php";
}

Och skicka.php innehåller bara ditt script, inget annat. Varken html, body eller nått.

Det som händer när jag byter kategori är att den andra menyn blir tom.

TulorkMedlem sedan aug. 2004903 inlägg

27 nov. 2007 19:54#12

Ser nu också att den faktiskt lägger till platserna i menyn, men skriver inte ut texten.

Så väljer jag Bygg & Anläggning så fylls den andra menyn ut med 3 platser.

Peter SMedlem sedan dec. 20025 483 inlägg

27 nov. 2007 19:55#13

Om du väljer Visa källa - hur ser koden ut då?

TulorkMedlem sedan aug. 2004903 inlägg

27 nov. 2007 19:56#14

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8(Unicode)" />
<title> - </title>
<link href="inc/style.css" rel="stylesheet" type="text/css" />

</head>

<body class="bg">
<div align="center" >
<div align="center" class="main" >
<div align="center" class="topheader" ><a href="index.php"><img src="pic/logo.png" alt="" border="0" /></a></div>
<div align="left" id="topmen"><span style="color:green; font-size:16px;">+ </span><a href="?skicka" class="green">Din referens hjälper andra!</a></div>
<!doctype html>

<select class="select" name="kategori" onchange="fillSelById(this.selectedIndex,'jobs')">
	<option value="0">Välj yrkesområde</option>
	<option value="1">Administration</option>
	<option value="2">Bygg &amp; Anläggning</option>
	<option value="3">Data/IT</option>
	<option value="4">Drift &amp; Underhåll</option>
	<option value="5">Ekonomi &amp; Finans</option>
	<option value="6">Forskning/vetenskap</option>
</select>

<select class="select" id="jobs">
<option value="">Inget valt</option>
</select>

<script type="text/javascript">
var jobs = [];
jobs[0] = ["Inget valt"];
jobs[1] = ["Lönenisse","Korvbagare"]; //Administration
jobs[2] = ["Snickare", "Gitarrstämmare","Stigbygel"]; //Bygg
jobs[3] = ["Nörd","Programmerare", "Flöjttillverkare", "Manickbyggare"]; //Data
jobs[4] = ["Serverkomiker"];
jobs[5] = ["Svartarbetare","Kommunalanställd"];
jobs[6] = ["Ingenjör","Politruck"];

function fillSelById(i,id) {
if (!(sel = document.getElementById(id)))
	return;

while (sel.hasChildNodes())
	sel.removeChild(sel.firstChild);

for (var j=0;j<jobs[i].length;j++)
	sel.appendChild(new Option(jobs[i][j],j));
	
}
</script>
<select class="select" name="lan">
<option value="">Välj län</option>
<option value="Bleking">Bleking</option>
<option value="Dalarna">Dalarna</option>
<option value="Gotland">Gotland</option>
<option value="Gävleborg">Gävleborg</option>
<option value="Halland">Halland</option>
<option value="Jämtland">Jämtland</option>
<option value="Jönköping">Jönköping</option>
<option value="Kalmar">Kalmar</option>
<option value="Kronoberg">Kronoberg</option>
<option value="Norrbotten">Norrbotten</option>
<option value="Skåne">Skåne</option>
<option value="Stockholm">Stockholm</option>
<option value="Södermanland">Södermanland</option>
<option value="Uppsala">Uppsala</option>
<option value="Värmland">Värmland</option>
<option value="Västerbotten">Västerbotten</option>
<option value="Västernorrland">Västernorrland</option>
<option value="Västmanland">Västmanland</option>
<option value="Västra Götaland">Västra Götaland</option>
<option value="Örebro">Örebro</option>
<option value="Östergötland">Östergötland</option>
</select>
</form>
<br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />

<img src="pic/banner1_728x90.gif" alt="" border="0"  />
<hr class="hr" />
<div align="center" style="margin-bottom:20px;"><span style="margin-right:10px;"><a href="#"><strong>Om -</strong></a></span><span style="margin-right:10px;"><a href="#"><strong>Statistik</strong></a></span><span style="margin-right:10px;"><a href="#"><strong>Kontakta oss</strong></a></span></div>
</div>
</div>
</body>
</html>

Peter SMedlem sedan dec. 20025 483 inlägg

28 nov. 2007 17:06#15

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8(Unicode)" />
<title> - </title>
<link href="inc/style.css" rel="stylesheet" type="text/css" />

</head>

<body class="bg">
<div align="center" >
<div align="center" class="main" >
<div align="center" class="topheader" ><a href="index.php"><img src="pic/logo.png" alt="" border="0" /></a></div>
<div align="left" id="topmen"><span style="color:green; font-size:16px;">+ </span><a href="?skicka" class="green">Din referens hjälper andra!</a></div>
<!doctype html>
<form>
<select class="select" name="kategori" onchange="fillSelByName(this.selectedIndex,'jobs')">
	<option value="0">Välj yrkesområde</option>
	<option value="1">Administration</option>
	<option value="2">Bygg &amp; Anläggning</option>
	<option value="3">Data/IT</option>
	<option value="4">Drift &amp; Underhåll</option>
	<option value="5">Ekonomi &amp; Finans</option>
	<option value="6">Forskning/vetenskap</option>
</select>

<select class="select" id="jobs" name="jobs">
<option value="">Inget valt</option>
</select>

<script type="text/javascript">
var jobs = [];
jobs[0] = ["Inget valt"];
jobs[1] = ["Lönenisse","Korvbagare"]; //Administration
jobs[2] = ["Snickare", "Gitarrstämmare","Stigbygel"]; //Bygg
jobs[3] = ["Nörd","Programmerare", "Flöjttillverkare", "Manickbyggare"]; //Data
jobs[4] = ["Serverkomiker"];
jobs[5] = ["Svartarbetare","Kommunalanställd"];
jobs[6] = ["Ingenjör","Politruck"];

function fillSelByName(i,name) {
 var sel = document.forms[0].elements[name];
 if (sel){
  sel.options.length = 0;
  for (var j=0;j<jobs[i].length;j++)
   sel.options[j] = new Option(jobs[i][j],j);
 }
	
}
</script>
<select class="select" name="lan">
<option value="">Välj län</option>
<option value="Bleking">Bleking</option>
<option value="Dalarna">Dalarna</option>
<option value="Gotland">Gotland</option>
<option value="Gävleborg">Gävleborg</option>
<option value="Halland">Halland</option>
<option value="Jämtland">Jämtland</option>
<option value="Jönköping">Jönköping</option>
<option value="Kalmar">Kalmar</option>
<option value="Kronoberg">Kronoberg</option>
<option value="Norrbotten">Norrbotten</option>
<option value="Skåne">Skåne</option>
<option value="Stockholm">Stockholm</option>
<option value="Södermanland">Södermanland</option>
<option value="Uppsala">Uppsala</option>
<option value="Värmland">Värmland</option>
<option value="Västerbotten">Västerbotten</option>
<option value="Västernorrland">Västernorrland</option>
<option value="Västmanland">Västmanland</option>
<option value="Västra Götaland">Västra Götaland</option>
<option value="Örebro">Örebro</option>
<option value="Östergötland">Östergötland</option>
</select>
</form>
<br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />

<img src="pic/banner1_728x90.gif" alt="" border="0"  />
<hr class="hr" />
<div align="center" style="margin-bottom:20px;"><span style="margin-right:10px;"><a href="#"><strong>Om -</strong></a></span><span style="margin-right:10px;"><a href="#"><strong>Statistik</strong></a></span><span style="margin-right:10px;"><a href="#"><strong>Kontakta oss</strong></a></span></div>
</div>
</div>
</body>
</html>

Jag petade in en <form> strax under <!doctype html> (som jag inte förstår varför den ligger där).

TulorkMedlem sedan aug. 2004903 inlägg

28 nov. 2007 17:34#16

Underbart, det funkar som det ska nu. Tusen tack colione och Peter S