[jQuery] selected

K

kbit

Erfahrenes Mitglied
Hi,

ich habe Hauptkategorien, die wiederrum mehrere Unterkategorien besitzen. z.B. Film(Haupt), Unterkategorien sind dann z.B. Action,Komödie usw. Ich möchte nun wenn ich eine Hauptkategorie ausgwählt habe (per Select) sich dann die Unterkategorien als Checkboxen darstellen.
Die Unterkategorien hole ich aus einer mysql DB. Das ist auch noch nicht das Problem.
Hier nur grobes bsp wie ich es machen würde:
HTML: 
<form action="test.php" method="get">  
  <select class="target" name="select">
    <option value="1">Film</option>
    <option value="2">Fernsehen</option>
  </select>
  <input type="submit" name="submit">
</form>
Code: 
<script>
$(document).ready( function() {

	$('.target').change(function() {

		var data=$(".target").val();

		$.get('test.php', {data: data
		});
	});
});
</script>

Ich möchte nun das wenn man eine Hauptkategorie mit den dazugehörigen Unterkategorien auswählt und dann eine weitere Hauptkategorie mit dazugehörigen Unterkategorien ausgewählt hat und dann das Formular abgeschickt wird (per submit) , das alle Daten gesendet werden. Das Problem ist das bei mir nur die Hauptkategorie mit den dazugehörigen Unterkategorien gesendet werden, nicht aber die, die ich davor ausgewählt habe.
Jemand eine Idee ?
 
Ich hab ehrlich gesagt nicht so richtig kapiert wo dein Problem liegt. Aber kann es sein das :checked das ist wonach du suchst ?!
 
Hi,
sorry ich versuch es nochmal etwas genau zu erklären.

Wenn ich eine Hauptkategorie ausgewählt habe z.B. Film dann hole ich mir aus der DB die Unterkategorien und gebe sie per json zurück:

PHP: 
echo json_encode(array('catDetails' => $catDetails));

Code: 
<script>
$(document).ready( function() {

	$('.target').change(function() {

		var data=$(".target").val();

              $.get('test.php', {data: data},
               function(data)
               {
                   for(var catData in data.catDetails)
		   {				
		       var cat = data.catDetails[catData];
			var chkbox = document.createElement("input");				
			chkbox.type = "checkbox";
			chkbox.id = cat['id']; 
			chkbox.name = cat['title'];
			chkbox.value = cat['id']; 					
			var ausgabe = document.getElementById("check");
			ausgabe.appendChild(chkbox);				
		   }
               },'json');
	});
});
</script>

Auswahl von Film(Hauptkategorie), anzeige der checkboxen für die Unterkategorien, das funktioniert auch. Aber wenn ich dann die andere Hauptkategorie Fernsehen auswähle dann werden zu den bereits bestehenden checkboxen die Unterkategorien für Fernsehen ausgegeben. Ich möchte aber immer nur die checkboxen angezeigt bekommen, von der Hauptkagegorie die per select ausgewählt wurde.
Gibt es da eine Möglichkeit das nur die neuen checkboxen geladen werden ?
Außerdem möchte ich das wenn eine checkbox angeklickt wurde z.B. Film => checkbox Unterkategorie "Action" wurde angeklickt und ich wähle dann Fernsehen und gehe dann wieder zu Film, das die checkbox immer noch angeklickt ist.

Ich möchte damit bezwecken, das jemand die Möglichkeit hat mehrere Unterkategorien von verschiedenen Hauptkategorien auszuwählen.
 
Zuletzt bearbeitet:
Moin,

kbit hat gesagt.:
Gibt es da eine Möglichkeit das nur die neuen checkboxen geladen werden ?
Zum Vergrößern anklicken....

Klar gibt es die.

Erstelle bspw. einen Container(div oder was dir passt), und vergebe ihm eine ID, anhand der du die Kategorie erkennst. Dort hinein packe die Checkboxen.


Wenn du eine Hauptkategorie gewählt hast, dann:

Schaue nach, ob der Container mit der betreffenden ID schon existert.

Falls ja: blende alle anderen Container aus und den betreffenden Container ein

Falls nein: Schicke den Request ab, blende alle Container aus, erzeuge aus der Antwort den beschriebenen Container mit den Checkboxen und hänge diesen an der gewünschten Stelle ein.
 
Hi,

also würdes du direkt alle Unterkategorien (checkboxen) laden und nur die ausblenden die man nicht brauch ?
 
Klar gibt es die.

Erstelle bspw. einen Container(div oder was dir passt), und vergebe ihm eine ID, anhand der du die Kategorie erkennst. Dort hinein packe die Checkboxen.
Zum Vergrößern anklicken....

Ich erstelle mir das div mit :
Code: 
$('<div id=cat_'+cat['catId']+'></div>').appendTo('.check');
Hier würde ich nun alle Unterkategorien (checkboxen) reinpacken:

Code: 
var chkbox = document.createElement("input");				
chkbox.type = "checkbox";
chkbox.id = cat['id']; 
chkbox.name = cat['title'];
chkbox.value = cat['id']; 					
var ausgabe = document.getElementById("cat_"+cat['catId']);
ausgabe.appendChild(chkbox);

Wenn du eine Hauptkategorie gewählt hast, dann:

Schaue nach, ob der Container mit der betreffenden ID schon existert.

Falls ja: blende alle anderen Container aus und den betreffenden Container ein
Zum Vergrößern anklicken....

Prüfen ob das div bereits existiert kann ich ja machen z.B. so: document.getElementById("cat_"+cat['catId']); Die cat['catId'] erhalte ich ja von der Hauptkategorie, aber wie würde ich denn die anderen container(div's) ausblenden ?

Hier nochmal der ganze bsp-Code:

HTML: 
<form action="test.php" method="get">  
  <select class="target" name="select">
    <option value="1">Film</option>
    <option value="2">Fernsehen</option>
  </select>
  <div class="check"></div>
  <input type="submit" name="submit">
</form>

Code: 
<script>
$(document).ready( function() {

	$('.target').change(function() {

		var data=$(".target").val();

              $.get('test.php', {data: data},
               function(data)
               {

                   for(var catData in data.catDetails)
		   {				
		        var cat = data.catDetails[catData];
			$('<div id=cat_'+cat['catId']+'></div>').appendTo('.check');

			var chkbox = document.createElement("input");				
			chkbox.type = "checkbox";
			chkbox.id = cat['id']; 
			chkbox.name = cat['title'];
			chkbox.value = cat['id']; 					
			var ausgabe = document.getElementById("cat_"+cat['catId']);
			ausgabe.appendChild(chkbox);				
		   }
               },'json');
	});
});
</script>

Das wäre jetzt z.B. das div das erstellt wurde:
HTML: 
<div id="cat_1">
<input id="5" type="checkbox" name="action" value="5"/>
</div>
 
kbit hat gesagt.:
wie würde ich denn die anderen container(div's) ausblenden ?
Zum Vergrößern anklicken....

Über einen passenden Selektor, in deinem Fall wäre dies
Code: 
div[id^=cat_]

Um dies etwas auf Kindknoten von .check einzugrenzen, so herum:
Code: 
//Verstecke alle Nachfahren von .check, deren ID mit cat_ beginnt
$('.check').find('div[id^=cat_]').hide();
 
Hi,

das ganze hatte gut funktioniert.
Jetzt werden mir im Moment alle checkboxen nebeneinander ausgegeben. Ich würde gerne aus optischen Gründen in z.B. einer Tabelle immer 3 checkboxen in einer Zeile angezeigt bekommen.

Ich müsste ja jetzt noch diesen Teil:

Code: 
var chkbox = document.createElement("input");				
chkbox.type = "checkbox";
chkbox.id = cat['id']; 
chkbox.name = cat['title'];
chkbox.value = cat['id']; 					
var ausgabe = document.getElementById("cat_"+cat['catId']);
ausgabe.appendChild(chkbox);

in eine Tabelle bekommen. Da habe ich aber so meine Ansatzschwierigkeiten, wie ich da vorgehen kann ?
 
Naja, man kann auch Tabellen erzeugen/mit Inhalt füllen.

Vorzugsweise solltest du dafür nicht die DOM-Methoden sondern die jQuery-Methoden verwenden, um Problemen beim IE diesbetreffend aus dem Wege zu gehen.

Angenommen, du hast eine leere Tabelle:
Code: 
<table id="check"></table>

dann wäre der singemässe Ablauf:
Code: 
  //tbody in Tabelle erzeugen
  var tb=$('<tbody></tbody>').appendTo('#check');
   //tr in Tbody erzeugen
  var tr=$('<tr></tr>').appendTo(tb);
  //td in tr erzeugen
  var td=$('<td></td>').appendTo(tr);
  //Chckbox in td einfügen
  td.append(chkbox):

damit du 3 Checkboxen je tr erhältst, verwende am einfachsten Modulo-Operation auf den aktuellen Index der Schleife

Code: 
if(!index%3){
   //tr in Tbody erzeugen
  var tr=$('<tr></tr>').appendTo(tb);
}
so erzeugst du nach 3 Checkboxen immer eine neue TR
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück