chained multi-select

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
GeXus
Forum Regular
Posts: 631
Joined: Sat Mar 11, 2006 8:59 am

chained multi-select

Post by GeXus »

Does anyone know of a good script already built to handle this type of functionality

http://cgi5.ebay.com/ws/eBayISAPI.dll?N ... js=1&aid=6
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

No, but I imagine it would be pretty easy to make.

Just make up a bunch of select boxes for every possible combination, & set their disabled & CSS display properties depending on what is selected.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
guitarlvr
Forum Contributor
Posts: 245
Joined: Wed Mar 21, 2007 10:35 pm

Post by guitarlvr »

Not positive, but you might be able to use AJAX for that sort of thing.

Wayne
GeXus
Forum Regular
Posts: 631
Joined: Sat Mar 11, 2006 8:59 am

Post by GeXus »

pickle wrote:No, but I imagine it would be pretty easy to make.

Just make up a bunch of select boxes for every possible combination, & set their disabled & CSS display properties depending on what is selected.
Um.. No.
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post by CoderGoblin »

In actual fact it is easy to make (just looks a bit different to a lot of the chained selects you see). All you need to do it look up chained select and modify the "size" of the select boxes boxes and position them correctly.

Dynamic/Chained Selects using Ajax Prototype/JQuery contains a couple of solutions for this using Jquery/prototype javascript libraries and AJAX.
GeXus
Forum Regular
Posts: 631
Joined: Sat Mar 11, 2006 8:59 am

Post by GeXus »

CoderGoblin wrote:In actual fact it is easy to make (just looks a bit different to a lot of the chained selects you see). All you need to do it look up chained select and modify the "size" of the select boxes boxes and position them correctly.

Dynamic/Chained Selects using Ajax Prototype/JQuery contains a couple of solutions for this using Jquery/prototype javascript libraries and AJAX.
Yeah, but a major difference is that the select boxes should not be in the markup, they should be dynamically created and removed as needed... and it should be able to support an unlimited number of levels.
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post by CoderGoblin »

Look at the generated source and you can see the placeholders are actually there, just with a CSS styling of "display: none;". They also make use of tables for formatting which makes life simpler. As for unlimited number of levels, in the example shown they don't have this, they stick to 3. Any more and you are going to run into additional "display" problems. If you need more than 3 levels perhaps a vertical Tree Display is a better solution.
GeXus
Forum Regular
Posts: 631
Joined: Sat Mar 11, 2006 8:59 am

Post by GeXus »

I was referring back to the ebay example, they support unlimited categories and there are no placeholders in the source.
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post by CoderGoblin »

When I looked at "generated" not "view" source I found a place holder but it doesn't matter anyway. It is easy to add HTML elements via Javascript using the Javascript Document Object Model such as with appendChild. Because the information is in a table the widths adjust automatically if a new column is inserted. Wouldn't call it unlimited levels though. It would soon get unreadable (insert 10 levels and you couldn't really read enough to browse).

Suggest you first get an understanding of chained selects (try chaining 5 selects) using common functions wherever possible (The function calls for select1 should be the same as those for any other column, as well as any PHP code). Then get to grips with the DOM in javascript inserting what you need to have for the chaining if the selects don't exist (at least by having the 5 selects working first with common functions, this should be easily worked out).

Also bear in mind ..what happens if users don't have javascript enabled ?

If you get problems post your code and specific questions. I doubt if anyone is going to write this for you but you may find a solution if you google around.
GeXus
Forum Regular
Posts: 631
Joined: Sat Mar 11, 2006 8:59 am

Post by GeXus »

Thats helpful, thank you. It's for an admin and javascript will always be enabled.
GeXus
Forum Regular
Posts: 631
Joined: Sat Mar 11, 2006 8:59 am

Post by GeXus »

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


Well, I've started doing some stuff here...   But I'm at a point where I'm sort of lost... here is what I have

[syntax="html"]

<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
.select_boxes{width: 150px; float: left; margin: 0 0 0 5px;}
.clear{clear: both;}
</style>
<script type="text/javascript" charset="utf-8">
$(function(){
  
      $("select").change(function(){
      var id = $(this).attr('id');
	
      			$.getJSON("get.html",{id: $(this).val(), ajax: 'true'}, function(j){
      
				var options = '';
      
				for (var i = 0; i < j.length; i++) {
        				
					options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
      				}


			//create dynamic selects
			a = document.getElementById("selects");

			nextId = document.createElement("select");
			nextId.className = 'select_boxes';
			nextId.size = '10';
			nextId.name = id+"_o";
			nextId.id = id+"_o";
			a.appendChild(nextId);


			$("select#"+id+"_o").html(options);
			
     
   			})
 		})
	


})

</script>
</head>
<body>

<form action="">

  <select name="id" id="cat_o" size="10" style="width: 150px; float: left;">
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
  </select>


<span id="selects" style="float: left";>
</span>
<br class="clear"/>


<input type="submit" name="action" value="Book" />
</form>

</body>
</html>


It's creating the select elements dynamically and populating via ajax... but it will only create new elements, when the first select (id cat_o) is changed.. the dynamic selects don't trigger the onchange event... any idea?


feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
Post Reply