472,353 Members | 1,373 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,353 software developers and data experts.

Select boxes to select sets

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.

Sep 14 '05 #1
5 2315
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
Sep 14 '05 #2
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


Sep 15 '05 #3
JRS: In article <11*********************@g47g2000cwa.googlegroups. com>,
dated Thu, 15 Sep 2005 06:48:20, seen in news:comp.lang.javascript,
ca********@gmail.com posted :
Obviously I read the "How to ask smart questions" FAQ _after_ I posted
my question. Sorry about that.
Now read the bit about not top-posting and not over-quoting. Compliance
encourages assistance.

<script language="JavaScript">
Deprecated : <script type="text/javascript">

function isOdd( val ){
if( val % 2 == 1 ){
return true;
} else {
return false;
}
}


function isOdd(X) { return X%2==1 } // is clearer

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Sep 16 '05 #4
Dr John Stockton wrote:
[...]

function isOdd( val ){
if( val % 2 == 1 ){
return true;
} else {
return false;
}
}

function isOdd(X) { return X%2==1 } // is clearer


OR

function isOdd(X) { return X&1 }// returns 1 or 0

Mick
Sep 16 '05 #5
JRS: In article <rr*******************@twister.nyroc.rr.com>, dated
Fri, 16 Sep 2005 21:04:23, seen in news:comp.lang.javascript, Mick White
<mw***********@rochester.rr.com> posted :
Dr John Stockton wrote:
[...]
function isOdd( val ){
if( val % 2 == 1 ){
return true;
} else {
return false;
}
}

function isOdd(X) { return X%2==1 } // is clearer


OR

function isOdd(X) { return X&1 }// returns 1 or 0


True; but a function called isOdd should IMHO return a genuine Boolean;
that's why I deleted X&1 and X%2 from my draft answer. One could put
!!(X%2) or !!(X&1).

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Sep 17 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

12
by: Forti2ude | last post by:
Hello, I have a simple form... <form> <select name="foo" multiple> <option value="1">one</option> <option value="2">two</option> <option...
3
by: Adam Toline | last post by:
In reference to the following: http://www.bellecose.com/form.htm At the top of each column there is a box for "All". When one is checked I...
4
by: Jay | last post by:
I'm trying to build a pretty complex form that submits to an email, but am having problems with a certain bunch of funcionality in it... Have a...
5
by: Allan M. | last post by:
I have a series of select boxes that must be populated client side, because they interact with each other. The design specification calls for...
5
by: Giggle Girl | last post by:
Is there away to change the border style of the "dropdown box" (Select input elements) for IE 6? By border style, I mean the initial light blue...
5
by: jjyconsulting | last post by:
Newbie needing some help. I have a tblParticipants. The fields include gender, education_level, income, occupation etc., I'm trying to create a...
2
by: simon.wilkinson | last post by:
Hi, I am trying to update all Select boxes on a page dynamically using javascript, I simple want to change the selected item in each select box...
1
by: Sunray | last post by:
I have a form called the sales form and i have 2 sets of listboxes So what happens is. i add items form the bottom set of list boxes which are bound...
10
by: brendanmcdonagh | last post by:
Hi all, I'm just getting to grips with java and have set my self a challenge to consolidate my learnings so far as well as implement new...
1
by: Kemmylinns12 | last post by:
Blockchain technology has emerged as a transformative force in the business world, offering unprecedented opportunities for innovation and...
0
by: Naresh1 | last post by:
What is WebLogic Admin Training? WebLogic Admin Training is a specialized program designed to equip individuals with the skills and knowledge...
2
by: Matthew3360 | last post by:
Hi, I have a python app that i want to be able to get variables from a php page on my webserver. My python app is on my computer. How would I make it...
0
by: AndyPSV | last post by:
HOW CAN I CREATE AN AI with an .executable file that would suck all files in the folder and on my computerHOW CAN I CREATE AN AI with an .executable...
0
hi
by: WisdomUfot | last post by:
It's an interesting question you've got about how Gmail hides the HTTP referrer when a link in an email is clicked. While I don't have the specific...
0
by: Matthew3360 | last post by:
Hi, I have been trying to connect to a local host using php curl. But I am finding it hard to do this. I am doing the curl get request from my web...
0
Oralloy
by: Oralloy | last post by:
Hello Folks, I am trying to hook up a CPU which I designed using SystemC to I/O pins on an FPGA. My problem (spelled failure) is with the...
0
by: Carina712 | last post by:
Setting background colors for Excel documents can help to improve the visual appeal of the document and make it easier to read and understand....
0
BLUEPANDA
by: BLUEPANDA | last post by:
At BluePanda Dev, we're passionate about building high-quality software and sharing our knowledge with the community. That's why we've created a SaaS...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.