Obviously I read the "How to ask smart questions" FAQ _after_ I posted
my question. Sorry about that.
So here is something that I came up with as a starting point. It
presents two list boxes: one has a list of numbers, and one has a list
of "groups". When a group is selected, the numbers in the first box
that are determined to be members of that group are highlighted.
The actual project I'm working on is quite a bit more complicated than
this, and would use Python to generate the list of Groups and the list
of Members, and to generate the JavaScript that determines the
relationships. It's all based on some XML that changes pretty
frequently.
----------------------------------------------
<script language="JavaScript">
<!--
function isPrime( val ){
if(val < 2){
return false;
}
else if(val == 2){
return true;
}
else{
for(var i = 2; i <= Math.sqrt(val); i++){
if(val % i == 0){
return false;
}
}
return true;
}
}
function isOdd( val ){
if( val % 2 == 1 ){
return true;
} else {
return false;
}
}
function isEven( val ){
if( val % 2 == 0 ){
return true;
} else {
return false;
}
}
function show(){
var group = document.f1.f_sGroup.value
num_opts = numlist.length;
msg = ""
for( i=0; i < num_opts; i++ ){
numlist.options[i].selected = false;
msg = msg + ( numlist.options[i].value ) + "\n";
if( group == "odd" ){
if( isOdd( numlist.options[i].value )){
numlist.options[i].selected = true;
}
}
if( group == "even" ){
if( isEven( numlist.options[i].value )){
numlist.options[i].selected = true;
}
}
if( group == "prime" ){
if( isPrime( numlist.options[i].value )){
numlist.options[i].selected = true;
}
}
}
//alert( msg )
}
-->
</script>
<table width = "70%" align="center">
<tr><td>
<form name="f1">
<select multiple name="f_sNums" size="10">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
<td>
<select multiple name="f_sGroup" size="10" onchange="show()">
<option value="odd">Odd</option>
<option value="even">Even</option>
<option value="prime">Prime</option>
</select>
</form>
</td></td></table>
<script language="JavaScript">
<!--
/* Create aliases for form elements */
var numlist = document.f1.f_sNums;
var grouplist = document.f1.f_sGroup;
-->
</script>
-------------------------------------------
RobG wrote:
ca********@gmail.com wrote: I'm relatively new to javascript, and I'm trying to decide whether the
following (and if so, clues on how to do it):
I'd like to create two HTML multiple-select boxes. The first would be
a list of items, and the second would be a list of categories. By
clicking a category in the 2nd box, the members of that category (from
the first box) would be highlighted (indicated here by arrows). E.g.,
-- List of Nums -- -- Categories --
1 Odd
2 <-- Even <--
3 Prime
4 <--
5
Any help in this matter is greatly appreciated.
You probably won't get many suggestions because your requirements are
not clear and you've made no attempt to present a solution.
You seem to want to select options in one list based on the selection
from another list. That has been covered numerous times in previous
posts, search for 'dynamic option list', there's a thread here:
<URL:http://groups.google.co.uk/group/comp.lang.javascript/browse_frm/thread/4aee4ddbd52c97c4/79d89c8dd0f2e169?q=dynamic+option+list&rnum=5&hl=e n#79d89c8dd0f2e169>
An issue you haven't covered is how to determine the options to select,
here's some suggestions.
You can hard-code the results, something like:
If 'Odd' selected, select 1, 3, 5
If 'Even' selected, select 2, 4
If 'Prime' selected, select 1, 2, 3, 5
A second method is to formulate tests for each entry in the numbers list
that are based on the categories:
If 'Odd' selected, select entries where isOdd(num) is true.
isOdd() can be: return ( num%2 != 0 );
If 'Even' selected, select entries where isOdd(num) is false.
(this will select 0 as even, which it isn't so if it is possible
that zero will be one of the numbers, deal with it)
If 'Prime' selected, select entries where isPrime(num)
(where isPrime() is some function that tests for prime numbers)
Another method is to create objects for all the entries in the number
list. Each object can have properties for value, isPrime and isOdd.
Then iterate through them much like the above only test the property of
each object rather than using a function. Select the associated entry
in the list if object's value for the tested property is true.
<script type="text/javascript">
var numObj = new Object();
numObj.value = 6;
numObj.even = true;
numObj.prime = false;
function showNumObj()
{
alert(
'Value: ' + numObj.value
+ '\nEven?: ' + ((numObj.even)?'Yes':'No')
+ '\nPrime?: ' + ((numObj.prime)?'Yes':'No')
);
}
</script>
<input type="button" value="See numObj" onclick="showNumObj();"><br>
How you create the objects and assign values to the properties is, of
course, another story.
There are probably many other ways of achieving whatever it is you are
trying to do.
--
Rob
