PDA

View Full Version : Multiple Select Issue



Timeass
Nov 29th, 2006, 02:09 PM
Hi,

I have this multiple select box with categories and subcategories, and what I want is when you click a category, all the subcategories of that category are automatically selected as well. I managed to get that working, but the problem is that when the event - onclick - is activated and it passes the value of the select box, it only passes the first element of the selected ones, the selected value listed at the top of the select box. Say you have a list with these values:

Category
- Subcategory
- Subcategory

When the Main category is already selected - and then so are the subcategories - and I press a subcategory, it passes the value of the first selected element - the main category - instead of the subcategory and the subcategories get selected once again. This way I can never deselect a subcategory. Another issue: when you have two main categories with subcategories - the first one is selected - and you click the second one, it passes the value of the first one and the subcategories of the second one don't get selected !

I don't know if there's a workaround for this problem or some kind of solution?

Thanks in advance,
Timeass

function selectsubcat(id)
{
// subcategories have an id that starts with 'sub'
if(id.charAt(0) != 's')
{
for(i=0; i<document.getElementById('catselect').options.length;i ++)
{
if(document.getElementById('catselect').options[i].value.indexOf('sub*'+id+'*') != -1)
{
document.getElementById('catselect').options[i].selected = true;
}
}
}
}

david_kw
Nov 29th, 2006, 11:54 PM
I messed around with it some and came up with the sample code below. One tricky thing is that with multiselect is you can deselect multiple things at a time by holding ctrl and click dragging. So I just decided to avoid that design problem. :)

Anyway, maybe this can point you in a direction that might be interesting.



<html>
<head>
<title>Multi-Select with Sub Categories</title>
<script type="text/javascript">
function checkMulti(oThis) {
var changeSub = false;
for (var i = 0; i < oThis.options.length; i++) {
if (oThis.options[i].value[0] == '-') {
if (changeSub) {
oThis.options[i].selected = true;
}
} else {
changeSub = oThis.options[i].selected;
}
}
}
</script>
</head>
<body>
<select id="aselect" name="aselect" multiple="multiple" size="8" onchange="checkMulti(this);">
<option>Car</option>
<option>- Honda</option>
<option>- GM</option>
<option>- Kia</option>
<option>Ice Cream</option>
<option>- Vanilla</option>
<option>- Chocolate</option>
<option>Book</option>
<option>- Fiction</option>
<option>- Biography</option>
<option>- Reference</option>
</select>
</body>
</html>


david_kw

Timeass
Nov 30th, 2006, 09:03 PM
After a bit of browsing I found an alternate way of triggering the event and managed to merge it with your script.

I came up with a very pleasing result :thumbsup:
Thanks a lot for your help

I know the code is a bit messy, but I don't see any way of optimizing it, if you see something that could increase the 'calculation time', feel free to tell me ;)


<html><head>
<script type="text/javascript">
function $(id)
{ return document.getElementById(id); }

window.onload = Init;
function Init()
{ $("woo").onclick = klik; }

function klik(e) {
if (!e) var e = window.event;
var el = e.target ? e.target : e.srcElement;
selectsubcat(el.id);
}

function selectsubcat(optid)
{
var mainid = $('woo').options[optid].value;
if(mainid[0] != 's')
{
for(i = 0; i < $('woo').options.length; i++)
{
if($('woo').options[i].value.indexOf('sub*'+mainid+'*') != -1 && $('woo').options[optid].selected == true)
{ $('woo').options[i].selected = true; }

if($('woo').options[i].value.indexOf('sub*'+mainid+'*') != -1 && $('woo').options[optid].selected == false)
{ $('woo').options[i].selected = false; }
}
}
else
{
if($('woo').options[optid].selected == false)
{
mymatch = /^sub\*(\d+)\*\d+/.exec($('woo').options[optid].value);
parentid = mymatch[1];
for(i = 0; i < $('woo').options.length; i++)
{ if($('woo').options[i].value == parentid) { $('woo').options[i].selected = false; break; } }

}
if($('woo').options[optid].selected == true)
{
var check = true;
mymatch = /^sub\*(\d+)\*\d+/.exec($('woo').options[optid].value);
parentid = mymatch[1];
var reggy = new RegExp('^sub\\*' + parentid + '\\*');
for(i = 0; i < $('woo').options.length; i++)
{
if($('woo').options[i].value[0] != 's') { continue; }
if($('woo').options[i].value.match(reggy) && $('woo').options[i].selected == false) { check = false; break; }
}
if(check == true)
{
for(i = 0; i < $('woo').options.length; i++)
{ if($('woo').options[i].value == parentid) { $('woo').options[i].selected = true; break; } }
}
}
}
}
</script>
</head><body>
<span id="debug"></span>
<select size="7" id="woo" multiple="true">
<option id='0' value="1">wan</option>
<option id='1' value="sub*1*4"> - too</option>
<option id='2' value="sub*1*5"> - sree</option>
<option id='3' value="2">fower</option>
<option id='4' value="sub*2*6"> - phive</option>
<option id='5' value="3">shicks</option>
</select>
</body></html>