webForumDet fria alternativet
Logga in

Använda två selectboxar

13 svar · 586 visningar · startad av addeweb

addewebMedlem sedan jan. 2004216 inlägg
#1

Jag har gjort iordning 2 st selectboxar varav ena för huvudmenyrubriker och den andra med undermenyrubriker. Tanken med denna funktion är att först välja önskad huvudmenyrubrik för att sedan få en lista med underrubriker i den andra boxen beroende på vilken huvudrubrik som valts. Om ingen val har gjorts i en av selectboxarna kan en sida bli huvudsida med egen toppmenyrubrik, annars undersida med menyrubrik om val har gjorts. När en önskad menyrubrik har valts, infogas uppgifterna från ett popup-fönster med selectboxarna i till en sida som ska läggas in i menyn och sparas. Problemet är att jag inte får fram menyrubriker i det andra selectboxen när jag valt en menyrubrik i den första boxen. I första boxen finns det också blanka rader mellan menyrubrikerna. Jag har kikat på källkoden till sidan men inte kunnat hittat felen med inga menyrubriker i det andra boxen och blankrader som uppstår i första boxen. I källkoden kunde jag också se att en menyrubrik har egna rätt underrubriker som fortfarande inte syns i andra boxen på sidan. Ingen som kan se vad jag har missat? Jag har inte gjort något liknande med 2 selectboxar tidigare, att först välja i ena boxen för att sedan välja i den andra boxen så att en sida hamnar på önskad plats. Tacksam för hjälp. Lätt att bli hemmablind på egen kod. Jag använder både javascript och PHP till denna funktion.

<?php 
$result = mysql_query("SELECT * FROM menu WHERE parent = 0 ORDER BY sequence")
 or die(mysql_error());
	
	$nr = 0; 
	
	while($row = mysql_fetch_assoc($result)){
	
		$topmenu_mid[$nr] = $row['mid'];
		$topmenu_heading[$nr] = $row['heading']; 
		
		$submenu_mid[$nr] = array();	
	 	$submenu_heading[$nr] = array();
		
		$result2 = mysql_query("SELECT * FROM menu WHERE parent = '".$row['mid']."' AND child_of = 0 ORDER BY sequence")
 or die(mysql_error()); 
		
while($row2 = mysql_fetch_assoc($result2)){		
			$submenu_mid[$nr][] = "'".$row2['mid']."'";
			$submenu_heading[$nr][] = "'".$row2['heading']."'"; 			
		}		
		$nr++; 			
	}
	foreach($submenu_mid as $key => $row){
		$submenu_mid[$key] = implode(", ", $row);	
	}
	foreach($submenu_heading as $key => $row){
		$submenu_heading[$key] = implode(", ", $row);	
	}	
?>
<!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>
<title>Välj menyrubrik</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/css/layout.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="../jscripts/scripts.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
var submenu_mids = new Array();
var submenu_headings = new Array();
<?php 
	foreach($submenu_mid as $key => $row){
		echo "submenu_mids[$key] = new Array($row);\n";	
	}
	foreach($submenu_heading as $key => $row){
		echo "submenu_headings[$key] = new Array($row);\n";	
	}	
?>

function chooseMenu( id, theForm ){
	theForm.child_of.options.length = submenu_mids[id].length+1;
	for(i=0; i<submenu_mids[id].length; i++){
		theForm.child_of.options[i+1].text = submenu_headings[id][i];
		theForm.child_of.options[i+1].value = submenu_mids[id][i];	
	}
}
-->
</script>
</head>
<body id="body_print">
<h3>Välj menyrubrik</h3>
<form name="myform" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
	<select name="parent" onChange="chooseMenu(this.options[this.selectedIndex].value, this.form)">
	<option>Ej valt</option>
	<?php	
		for($m=0; $m<count($topmenu_mid); $m++){
			echo "<option value=\"".$topmenu_mid[$m]."\">".$topmenu_heading[$m]."<option>\n";
		}	
	?>	
	</select>
	<select name="child_of">
		<option>Ej valt</option>
	</select>
	<input type="submit" name="insert" value="Infoga" />
</form>
<?php

	mysql_close($connection); 
?>
<p style="margin-top: 20px; text-align: center">
<input type="button" name="close" onclick="window.close();" value="Stäng fönstret!" />
</p>
</body>
Peter SMedlem sedan dec. 20025 483 inlägg
#2

Jag tror det underlättar om du endast visar HTML- och JS-kod.

addewebMedlem sedan jan. 2004216 inlägg
#3

Det skulle jag ha gjort men det är både Javascript och PHP i koden. Helheten skulle nog gå förlorat om jag separerar koden. Det är väl inte heller meningen att jag ska behöva lägga in samma sak i två olika forum? En kod för PHP-forumet och samma i Javascript-forumet? Jag kan inte stå på två ben samtidigt, därför valde jag Javascript-forumet.

Peter SMedlem sedan dec. 20025 483 inlägg
#4

Men om du väljer Visa källa i webbläsaren och klistrar in resultatet här, så slipper du klippa ut PHP-koden för hand (vilket faktiskt inte alls skulle vara någon bra lösning).

addewebMedlem sedan jan. 2004216 inlägg
#5

Ok, det skulle jag ha tänkt på. Här är källkoden.

<!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>
<title>Välj menyrubrik</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/css/layout.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="../jscripts/scripts.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
var submenu_mids = new Array();
var submenu_headings = new Array();
submenu_mids[0] = new Array();
submenu_mids[1] = new Array('5', '6', '11');
submenu_mids[2] = new Array();
submenu_mids[3] = new Array();
submenu_headings[0] = new Array();
submenu_headings[1] = new Array('N&auml;ringsl&auml;ra', 'Fettf&ouml;rbr&auml;nning', 'Ordlista A-&Ouml;');
submenu_headings[2] = new Array();
submenu_headings[3] = new Array();

function populate( id, theForm ){
	theForm.child_of.options.length = submenu_mids[id].length+1;
	for(i=0; i<submenu_mids[id].length; i++){
		theForm.child_of.options[i+1].text = submenu_headings[id][i];
		theForm.child_of.options[i+1].value = submenu_mids[id][i];	
	}
}
-->
</script>
</head>
<body id="body_print">
<h3>Välj menyrubrik</h3>
<form name="myform" action="/content_menu_selectbox.php" method="post">
	<select name="parent" onChange="populate(this.selectedIndex, this.form.child_of)">

	<option>Ej valt</option>
			<option value="2">OM MIG<option>
		<option value="3">MAT &amp; TR&Auml;NING<option>
		<option value="21">PERSONLIG TR&Auml;NING<option>
		<option value="4">KONTAKT<option>

	
	</select>
	<select name="child_of">
		<option>Ej valt</option>
	</select>
	<input type="submit" name="insert" value="Infoga" />
</form>
<p style="margin-top: 20px; text-align: center"><input type="button" name="close" onclick="window.close();" value="Stäng fönstret!" /></p>
</body>
</html>
Peter SMedlem sedan dec. 20025 483 inlägg
#6
onchange="populate(this.selectedIndex, this.form)"
addewebMedlem sedan jan. 2004216 inlägg
#7

Det fungerar men inte riktigt bra ännu eftersom den första menyrubriken överst i den första selectboxen har undermenyrubriker i andra boxen och som borde istället tillhöra den andra menyrubriken under den första.

Peter SMedlem sedan dec. 20025 483 inlägg
#8

Nu skall vi se...

"den första menyrubriken överst i den första selectboxen" --> "Ej valt", har alltså undermenyrubriker i den andra boxen? Nja, den är ju tom:

submenu_headings[0] = new Array();

Eller menar du att Näringslära, Fettförbränning och Ordlista skall visas i den andra <select>:en då Mat & Träning väljs? I sådana fall:

submenu_mids[0] = new Array();
submenu_mids[1] = new Array();
submenu_mids[2] = new Array();
submenu_mids[3] = new Array('5', '6', '11');
submenu_headings[0] = new Array();
submenu_headings[1] = new Array();
submenu_headings[2] = new Array();
submenu_headings[3] = new Array('N&auml;ringsl&auml;ra', 'Fettf&ouml;rbr&auml;nning', 'Ordlista A-&Ouml;');
addewebMedlem sedan jan. 2004216 inlägg
#9

Ja, det var ju meningen att det skulle bli så. Än funkar det inte. Jag har också testat med att undanta första elementet i arrayen för rubriken "Ej valt" med så här.

var submenu_mids = new Array();
var submenu_headings = new Array();

submenu_mids[0] = 0; 
submenu_headings[0] = "Ej valt";

submenu_mids[1] = new Array();
submenu_mids[2] = new Array('5', '6', '11');
submenu_mids[3] = new Array();
submenu_mids[4] = new Array();
submenu_headings[1] = new Array();
submenu_headings[2] = new Array('N&auml;ringsl&auml;ra', 'Fettf&ouml;rbr&auml;nning', 'Ordlista A-&Ouml;');
submenu_headings[3] = new Array();
submenu_headings[4] = new Array();

Det händer fortfarande att rubriken "Mat & Träning" ibland inte får underrubrikerna medan "Om mig" istället får dessa rubriker. Byter jag till annan toppmenyrubrik t.ex "Personlig träning" i första boxen ligger undermenyrubrikerna kvar i andra boxen.

Peter SMedlem sedan dec. 20025 483 inlägg
#10

Med

var submenu_mids = new Array();
var submenu_headings = new Array();
submenu_mids[0] = new Array();
submenu_mids[1] = new Array();
submenu_mids[2] = new Array();
submenu_mids[3] = new Array('5', '6', '11');
submenu_headings[0] = new Array();
submenu_headings[1] = new Array();
submenu_headings[2] = new Array();
submenu_headings[3] = new Array('N&auml;ringsl&auml;ra', 'Fettf&ouml;rbr&auml;nning', 'Ordlista A-&Ouml;');

function populate( id, theForm ){
	theForm.child_of.options.length = submenu_mids[id].length+1;
	for(i=0; i<submenu_mids[id].length; i++){
		theForm.child_of.options[i+1].text = submenu_headings[id][i];
		theForm.child_of.options[i+1].value = submenu_mids[id][i];	
	}
}

...visas Näringslära m.fl. när Mat & Träning väljs.

Anledningen till att de fortfarande ligger kvar i den andra <select>:en om t.ex. Personlig Träning väljs, är att du ej lagt till några submenu_mids och submenu_headings för dem -- endast för de fyra första valen finns arrayvärden definierade.

addewebMedlem sedan jan. 2004216 inlägg
#11

Nu förstår jag inte vad du menar. Alla menyrubriker hämtas från en databas MySQL och sorteras i viss ordningsföljd.

Peter SMedlem sedan dec. 20025 483 inlägg
#12

Du har åtta <option>:s i den första <select>:en, men endast fyra arrays definierade som värden för dessa. Dessa fyra är submenu_mids och submenu_headings med index 0-3.

För att var och en av de åtta alternativen skall påverka den andra <select>:en, gör du bäst i att skapa arrays som motsvarar dem alla -- alltså submenu_mids och submenu_headings med index 4-7.

addewebMedlem sedan jan. 2004216 inlägg
#13

Ojdå! Jag såg i källkoden att de 4 extra starttaggarna <option> som finns där nu borde istället vara sluttaggar </option>.

addewebMedlem sedan jan. 2004216 inlägg
#14

Problemet är nu löst. De båda selectboxarna fungerar fint. Det var fel på <option>-taggarna, <option> som sluttagg istället för </option>.

127 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
124 ms — hämta tråd, inlägg och bilagor (db)