Page 1 of 1

chained multi-select

Posted: Mon May 07, 2007 10:22 am
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

Posted: Mon May 07, 2007 2:39 pm
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.

Posted: Mon May 07, 2007 2:41 pm
by guitarlvr
Not positive, but you might be able to use AJAX for that sort of thing.

Wayne

Posted: Mon May 07, 2007 4:44 pm
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.

Posted: Tue May 08, 2007 3:14 am
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.

Posted: Tue May 08, 2007 11:46 am
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.

Posted: Wed May 09, 2007 3:20 am
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.

Posted: Wed May 09, 2007 11:55 am
by GeXus
I was referring back to the ebay example, they support unlimited categories and there are no placeholders in the source.

Posted: Thu May 10, 2007 3:30 am
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.

Posted: Thu May 10, 2007 9:20 am
by GeXus
Thats helpful, thank you. It's for an admin and javascript will always be enabled.

Posted: Thu May 10, 2007 10:42 am
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]