Dear comp.lang.javas cript,
I have more than once wanted to manipulate the contents of select boxes
dynamically, whilst the boxes contain <optgroup> tags.
Manipulation of a select box containing only <option> tags is fairly
easy and there is plenty of material on the net to assist with this.
However, I have searched long and found the material on the subject of
<optgroup> to be sparse, with a few posts here & there, but basically
you're on your own.
After much trial & error regarding techniques for this, I have a fairly
generic solution, which I decided to share, and the code is below. Two
different scenarios I have come across are (1) altering the contents of
one <select> dynamically depending upon another, and (2) being able
click 'up' and 'down' buttons to alter the sequence of the listing
(whilst keeping each <option> within its respective <optgroup>) I tried
various solutions for both of these which tended to either trash the
screen, alter which <optgroup> an <option> was under or trash the
<optgroup>s altogether.
Both these situations can be handled with the solution here. Basically
I keep the <optgroup>s and <option>s stored in an Array(), and then use
the Array() to reconstruct the <select>.
To use, just manipulate the Array() in memory - which I find very easy
- and then call the function to reconstruct.
I like to build the <select> <optgroup> <option> set using HTML as
normal and then create the Array() with <body onload=""> as this makes
it usable where javascript is unavailable, rather than have the Array()
as a hard-coded start point.
Reasonably tested on IE6, known to be buggy on Opera 8 - not sure why.
Constructive comments, insights, additions etc, are welcome.
Thank you,
Stewart
<html>
<head>
<script type="text/javascript">
var selectOptions = new Array(
new Array('Group One',
new Array('Option One', 21),
new Array('Option Two', 22),
new Array('Option Three', 23)),
new Array('Group Two',
new Array('Option Four', 24),
new Array('Option Five', 25),
new Array('Option Six', 26)),
new Array('Group Three',
new Array('Option Seven', 27),
new Array('Option Eight', 28),
new Array('Option Nine', 29)));
function constructArray( list)
{
selectOptions = new Array();
var optgroups = list.childNodes ;
var m = 0;
for(i = 0 ; i < optgroups.lengt h ; i++)
{
var n = 1;
if(optgroups[i].nodeName == 'OPTGROUP')
{
selectOptions[m] = new Array(optgroups[i].label);
var options = optgroups[i].childNodes;
for(j = 0 ; j < options.length ; j++)
{
if(options[j].nodeName == 'OPTION')
{
selectOptions[m][n++] =
new Array(options[j].text, options[j].value);
}
}
m++;
}
}
reConstructSele ctBox(list);
}
function reConstructSele ctBox(list)
{
// Javascript re-indexs after each null or removeChild()
// so we have to count backwards
for(i = list.options.le ngth - 1 ; i >= 0 ; i--)
{
list.options[i] = null;
}
var optgroups = list.childNodes ;
for(i = optgroups.lengt h - 1 ; i >= 0 ; i--)
{
list.removeChil d(optgroups[i]);
}
var k = 0;
for(i = 0 ; i < selectOptions.l ength ; i++)
{
var group = selectOptions[i];
var optgroup = document.create Element('optgro up');
optgroup.label = group[0];
list.appendChil d(optgroup);
for(j = 1 ; j < group.length ; j++)
{
var option = new Option(group[j][0], group[j][1]);
list.options[k++] = option;
}
}
}
</script>
</head>
<body onload="constru ctArray(this.fo rm.list);">
<form method="post" action="" name="form">
<select name="list" size="15" id="list">
<optgroup label="Group One">
<option value="21">Opti on One</option>
<option value="22">Opti on Two</option>
<option value="23">Opti on Three</option>
</optgroup>
<optgroup label="Group Two">
<option value="24">Opti on Four</option>
<option value="25">Opti on Five</option>
<option value="26">Opti on Six</option>
</optgroup>
<optgroup label="Group Three">
<option value="27">Opti on Seven</option>
<option value="28">Opti on Eight</option>
<option value="29">Opti on Nine</option>
</optgroup>
</select>
</body>
</html>
3  15620 
Cool but not stable.
A lot of things to learn yet.
VK wrote: Cool but not stable.
A lot of things to learn yet.
A reply which arouses curiosity, but fails to enlighten!
Pray tell, where should I find these many things I have yet to learn?
> Reasonably tested on IE6, known to be buggy on Opera 8 - not sure why.
Found that the bit that doesn't work in Opera is the removeChild() call
in this section:
var optgroups = list.childNodes ;
for(i = optgroups.lengt h - 1 ; i >= 0 ; i--)
{
list.removeChil d(optgroups[i]);
}
Apparently others have come across this, see post entitled "select
element, optgroup and removeChild" by Lasse Reichstein Nielsen, Jul 21
2003, 11:26 pm, in group opera.beta This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: mr_burns |
last post by:
hi,
using javascript, how do i select an option in a combo box? i have
tried looking on the internet but dont really know what i should be
searching for. what i want to happen is that when a function is called
a line of code will select a specific option in a combo box. something
like:
//excuse the dodgy syntax
|
by: Steve Wright |
last post by:
Hi all,
I suspect that I will need Javascript to make this work which is why I am
asking the question here! (and also crossposting)
Can someone tell me if it is possible to have an HTML select statement that
gets its options from a text file.
<select name="contract">
<option value="">Select Contract</option> |
<option value="RS-330">RS-330 Northern</option> | these
|
by: Ilpo |
last post by:
Hi!
Is it possible to open DHTML menu from a select box option?
I need a select box which shows a new sub-menu when pointing the mouse
over an option. Does anyone know is this possible? The option
onMouseover doesn't seem to work.
Thanks for any help!!
|
by: Jim |
last post by:
Hi, there,
I am a beginner on Access.
I have been taking so long time to try to figure out his, but so far,
no clues.
I want to select 2 combo boxes and Access will automatically fill in
other 5 bound text fields for me. I searched all groups and microsoft
support sites, no result.
|
by: Paul |
last post by:
I have some option boxes and combo boxes that looks up values on a
separate table (i.e. campus table with campusID & campus name fields)
When I choose a selection from the combo box, it puts the information
in a
main table when I do ADD RECORD. Only the campusID (a number) gets
added in
the main table. How can I get the corresponding value displayed on
the table (i.e. campus name) instead of the equivalent campusID (which
is unique).
| | |
by: jojowebdev |
last post by:
Picking up from Friday..
I am still having trouble creating the Select Menu option. I got parts
of the correct syntax but it is still not creating the selected carrier
as an option in the parent page.
Help apprecitate,. I currently have it commented out just to show the
line to you better:
function onCarrierSelect() {
var frm = document.carrRequestForm.carrierList.selectedIndex;
|
by: Andy |
last post by:
Hi, I'm trying to render tabular data in an HTML document using XSL to
transform XML data into an HTML table. Some of the tabular data
appears as droplists (implemented by the HTML Select and Option tags).
All the droplists have the same option entries that a user can choose
from.
Is there anyway to reuse a single "master" branch in the XML document
that contains all the option entries for all the select droplists in
the XSL document?...
|
by: Sebastian Fey |
last post by:
hi,
how do you select an option using javascript?
i tried to setAttribute("selected", "disabled") to disable last
selected and setAttribute("selected", "selected") for the newly selected.
doesnt work :)
|
by: JackieSmith |
last post by:
I have 2 option boxes with 3 radio buttons on each of them. They are deigned to fitler my subform depending on the selections.
They both work great independently but neither work together. The first option box is to select view only pass, fail or both. The second is to select male, female or both.
If I chose males that passed it only chooses the second option to displaying ignoring the other filter (this data is already filtered by...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
| | |
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| | |
