Dynamic selects with json and jquery

I've done a small javascript cascade selector that uses json data, but i can't find a way to set a value for default and generate the selectors with the value.

It generates the selects, but when i change the values intead hide/replace them it fails.

Living example here: http://jsfiddle.net/seinoxygen/aLfZT/ (the second selectors)

It could be good merge both functions in just one.

The idea is generate them on change (like is working print_cat(cat, 0);) but if value is passed as default generate the selects until reach the value passed like the second. But the second doent work properly when is changed.

So, if i pass print_cat(cat, 0); print just the fisrt combo with all categories with parent 0. And If i pass print_cat(cat, 35); print the categorie and the parents luke the second select groups.
seinoxygenAsked:
Who is Participating?
 
leakim971PluritechnicianCommented:
<!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" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script language="javascript">
	var cat = {Categories:[{id:3,parent:0,name:'Animals'},{id:4,parent:3,name:'Bird'},{id:17,parent:0,name:'Isometric'},{id:32,parent:3,name:'Equine'},{id:35,parent:32,name:'Zebra'},{id:5,parent:3,name:'Cat'}]};

	$(document).ready(function() {

		var container = "body";

		$(container).prepend(print_cat(cat, 35));

		$("select[id^='select']").live("change", function() {
			$(this).nextAll("select[id^='select']").remove();
			if($(this).val()!="") {
				$(print_cat(cat, $(this).val())).insertAfter(this);
			}
		});

	});

	function print_cat(json, parent) {
		var json = json.Categories;
		var s = "";
		var id = -1;
		
		while(true) {
			var o = (parent == 0)?"<option value=\"\" selected=\"selected\" />":"";

			for(j in json) {
				if( json[j].parent == parent ){
					o += "<option value=\"" + json[j].id + "\" " + ((json[j].id==id)?"selected=\"selected\"":"") + ">" + json[j].name + "</option>";
				}
			}
			if(o != "" && $("#select"+parent).length==0 ) {
				s = "<select id=\"select" + parent + "\">" + o + "</select>" + s;
			}
			if(parent != 0) {
				for(var j in json) {
					if(json[j].id == parent) {
						id = json[j].id;
						parent = json[j].parent;
						break;
					}
				}
			}
			else {
				break;
			}
		}
		return $(s);
	}

</script>
</head>
<body>
</body>
</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
Please have a look to the following :
<!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" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script language="javascript">
	var cat = {Categories:[{id:3,parent:0,name:'Animals'},{id:4,parent:3,name:'Bird'},{id:17,parent:0,name:'Isometric'},{id:32,parent:3,name:'Equine'},{id:35,parent:32,name:'Zebra'},{id:5,parent:3,name:'Cat'}]};

	$(document).ready(function() {
		$("#select0").html( "<option/>" + print_cat(cat, 0) );

		$("#select0").change(function() {
			$("#select1").html( "<option/>" + print_cat(cat, $(this).val()) );
			$("#select2").html("");
		});

		$("#select1").change(function() {
			$("#select2").html( "<option/>" + print_cat(cat, $(this).val()) );
		});

		$("#select2").change(function() {
			// do something
		});
	});

	function print_cat(json, parent) {
		var o = "";
		var json = json.Categories;
		for(j in json) {
			if( json[j].parent == parent ){
				o += "<option value=\"" + json[j].id + "\">" + json[j].name + "</option>";
			}
		}
		return o;
	}

</script>
</head>
<body>
<select id="select0"></select><select id="select1"></select><select id="select2"></select>
</body>
</html>

Open in new window

0
 
seinoxygenAuthor Commented:
I need that the selects appear or dissapear when its needed, not let them fixed in the html. That solution doesn't works for me.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
leakim971PluritechnicianCommented:
Setting the visibility dropdown :

<!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" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script language="javascript">
	var cat = {Categories:[{id:3,parent:0,name:'Animals'},{id:4,parent:3,name:'Bird'},{id:17,parent:0,name:'Isometric'},{id:32,parent:3,name:'Equine'},{id:35,parent:32,name:'Zebra'},{id:5,parent:3,name:'Cat'}]};

	$(document).ready(function() {

		$("#select0").html( "<option/>" + print_cat(cat, 0) );
		$("#select1").css("visibility", "hidden");
		$("#select2").css("visibility", "hidden");

		$("#select0").change(function() {
			options = print_cat(cat, $(this).val());
			$("#select1, #select2").css("visibility", (options.length==0)?"hidden":"visible");
			$("#select1").html( "<option/>" + options );
			$("#select2").html("");
		});

		$("#select1").change(function() {
			options = print_cat(cat, $(this).val());
			$("#select2").css("visibility", (options.length==0)?"hidden":"visible");
			$("#select2").html( "<option/>" + options );
		});

		$("#select2").change(function() {
			// do something
		});
	});

	function print_cat(json, parent) {
		var o = "";
		var json = json.Categories;
		for(j in json) {
			if( json[j].parent == parent ){
				o += "<option value=\"" + json[j].id + "\">" + json[j].name + "</option>";
			}
		}
		return o;
	}

</script>
</head>
<body>
<select id="select0"></select><select id="select1" ></select><select id="select2"></select>
</body>
</html>

Open in new window

0
 
seinoxygenAuthor Commented:
Still not usefull! The categories has NO limit, it could generate infinite selectors depending on infinite childns and parents.
0
 
leakim971PluritechnicianCommented:
Check this one :
<!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" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script language="javascript">
	var cat = {Categories:[{id:3,parent:0,name:'Animals'},{id:4,parent:3,name:'Bird'},{id:17,parent:0,name:'Isometric'},{id:32,parent:3,name:'Equine'},{id:35,parent:32,name:'Zebra'},{id:5,parent:3,name:'Cat'}]};

	$(document).ready(function() {

		$("body").prepend(print_cat(cat, 0));

		$("select[id^='select']").live("change", function() {
			$(this).next("select[id^='select']").remove();
			print_cat(cat, $(this).val()).insertAfter(this);
		});
	});

	function print_cat(json, parent) {
		var o = "";
		var json = json.Categories;
		for(j in json) {
			if( json[j].parent == parent ){
				o += "<option value=\"" + json[j].id + "\">" + json[j].name + "</option>";
			}
		}
		if(o=="") return $([]);
		return $( "<select id=\"select" + parent + "\">" + ((parent==0)?"<option />":"") + o + "</select>" );
	}

</script>
</head>
<body>
</body>
</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
Correction line 29 :
<!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" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script language="javascript">
	var cat = {Categories:[{id:3,parent:0,name:'Animals'},{id:4,parent:3,name:'Bird'},{id:17,parent:0,name:'Isometric'},{id:32,parent:3,name:'Equine'},{id:35,parent:32,name:'Zebra'},{id:5,parent:3,name:'Cat'}]};

	$(document).ready(function() {

		$("body").prepend(print_cat(cat, 0));

		$("select[id^='select']").live("change", function() {
			$(this).next("select[id^='select']").remove();
			print_cat(cat, $(this).val()).insertAfter(this);
		});
	});

	function print_cat(json, parent) {
		var o = "";
		var json = json.Categories;
		for(j in json) {
			if( json[j].parent == parent ){
				o += "<option value=\"" + json[j].id + "\">" + json[j].name + "</option>";
			}
		}
		if(o=="") return $([]);
		return $( "<select id=\"select" + parent + "\">" + ((parent==0)?"<option value=\"-1\" />":"") + o + "</select>" );
	}

</script>
</head>
<body>
</body>
</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
A new one :
<!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" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script language="javascript">
	var cat = {Categories:[{id:3,parent:0,name:'Animals'},{id:4,parent:3,name:'Bird'},{id:17,parent:0,name:'Isometric'},{id:32,parent:3,name:'Equine'},{id:35,parent:32,name:'Zebra'},{id:5,parent:3,name:'Cat'}]};

	$(document).ready(function() {

		$("body").prepend(print_cat(cat, 0).prepend("<option value=\"-1\" selected=\"selected\" />"));

		$("select[id^='select']").live("change", function() {
			$(this).next("select[id^='select']").remove();
			print_cat(cat, $(this).val()).insertAfter(this);
		});
	});

	function print_cat(json, parent) {
		var o = "";
		var json = json.Categories;
		for(j in json) {
			if( json[j].parent == parent ){
				o += "<option value=\"" + json[j].id + "\">" + json[j].name + "</option>";
			}
		}
		if(o=="") return $([]);
		return $( "<select id=\"select" + parent + "\">" + o + "</select>" );
	}

</script>
</head>
<body>
</body>
</html>

Open in new window

0
 
seinoxygenAuthor Commented:
Again, please check my example. WWhat you commented is already working there.

The problem is that i need to merge both functions print_cat() AND reverse_print().

So if i write print_cat(json, 0) print the first selector, like now. But if i use print_cat(json, 35) it should print all the selectos with the values selected until reach the "zebra" category. Like is doing reverse_print().
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.