?
Solved

Dynamic selects with json and jquery

Posted on 2011-05-12
9
Medium Priority
?
575 Views
Last Modified: 2013-11-08
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.
0
Comment
Question by:seinoxygen
  • 6
  • 3
9 Comments
 
LVL 83

Expert Comment

by:leakim971
ID: 35751496
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
 

Author Comment

by:seinoxygen
ID: 35752936
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
 
LVL 83

Expert Comment

by:leakim971
ID: 35753669
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:seinoxygen
ID: 35757926
Still not usefull! The categories has NO limit, it could generate infinite selectors depending on infinite childns and parents.
0
 
LVL 83

Expert Comment

by:leakim971
ID: 35758641
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
 
LVL 83

Expert Comment

by:leakim971
ID: 35758646
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
 
LVL 83

Expert Comment

by:leakim971
ID: 35760102
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
 

Author Comment

by:seinoxygen
ID: 35760185
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
 
LVL 83

Accepted Solution

by:
leakim971 earned 1000 total points
ID: 35761380
<!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

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month13 days, 12 hours left to enroll

755 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question