Hi all,
I know how to do this the hard way, but I suspect that there's an
easier option.
I'm creating a program that requires a series of 4 or 6 select menus.
Something like this:
<select name="1">
<option value="a">A</option>
<option value="b">B</option>
</select>
If the visitor chooses "A", they'll see:
<select name="2">
<option value="c">C</option>
<option value="d">D</option>
</select>
But if they choose "B" in that first menu, they'll see:
<select name="2">
<option value="e">E</option>
<option value="f">F</option>
</select>
Make sense? This goes on for 5 of these menus, and each menu is
dependent upon a previous selection.
My problem is when someone is already on, say, menu # 4, but then goes
back to change menu # 2. At that point, I need for menu # 3 and # 4 to
go away, as if they had never been created in the first place.
The only way I know to do is something like this:
<script>
function changeit() {
if (select2 !== "")
var select2 = "<select name='2><option value='c'>C</option><option
value='d'>D</option></select>";
document.getEle mentById("2").i nnerHTML = select2;
}
</script>
<select name="1" onChange="selec t2 = ''; changeit()">
<option value="a">A</option>
<option value="b">B</option>
</select>
<span id="2"></span>
But this seems to be overly complicated, especially after doing 6 of
these select menus! Is there an easier way that I'm not seeing?
TIA,
Jason
PS, all code was written specifically for this email just to help
explain my problem, so please overlook any typos. 2 1389
On Mar 15, 3:53 pm, "Jason" <jwcarl...@gmai l.comwrote:
Hi all,
I know how to do this the hard way, but I suspect that there's an
easier option.
I'm creating a program that requires a series of 4 or 6 select menus.
Something like this:
<select name="1">
<option value="a">A</option>
<option value="b">B</option>
</select>
If the visitor chooses "A", they'll see:
<select name="2">
<option value="c">C</option>
<option value="d">D</option>
</select>
But if they choose "B" in that first menu, they'll see:
<select name="2">
<option value="e">E</option>
<option value="f">F</option>
</select>
Make sense? This goes on for 5 of these menus, and each menu is
dependent upon a previous selection.
My problem is when someone is already on, say, menu # 4, but then goes
back to change menu # 2. At that point, I need for menu # 3 and # 4 to
go away, as if they had never been created in the first place.
The only way I know to do is something like this:
<script>
function changeit() {
if (select2 !== "")
var select2 = "<select name='2><option value='c'>C</option><option
value='d'>D</option></select>";
document.getEle mentById("2").i nnerHTML = select2;}
</script>
<select name="1" onChange="selec t2 = ''; changeit()">
<option value="a">A</option>
<option value="b">B</option>
</select>
<span id="2"></span>
But this seems to be overly complicated, especially after doing 6 of
these select menus! Is there an easier way that I'm not seeing?
I would create a scheme for the select names, like:
<select name="sel_1" onchange="updat eSel(this);" ...>
<option></option>
</select>
<select name="sel_2" onchange="updat eSel(this);" ...>
<option></option>
</select>
and so on. Each would have a default first option. Whenever any
option is modified, the options for the next select are inserted and
those of any subsequent select are removed by setting the length of
their options property to 1.
e.g. (play code):
function updateSel( sel ){
function getNextSel (sel) {
var selNum = sel.name.split( '_')[1];
return sel.form.elemen ts['sel_' + (+selNum+1)];
}
var nextSel = getNextSel(sel) ;
// set the options for the next select
// based on the seleted option
// Now clear any subsequent select
while (nextSel = getNextSel(next Sel)) {
nextSel.options .length = 1;
}
}
Untested of course, but hopefully you get the idea.
--
Rob
I would create a scheme for the select names, like:
>
<select name="sel_1" onchange="updat eSel(this);" ...>
<option></option>
</select>
<select name="sel_2" onchange="updat eSel(this);" ...>
<option></option>
</select>
and so on. Each would have a default first option. Whenever any
option is modified, the options for the next select are inserted and
those of any subsequent select are removed by setting the length of
their options property to 1.
e.g. (play code):
function updateSel( sel ){
function getNextSel (sel) {
var selNum = sel.name.split( '_')[1];
return sel.form.elemen ts['sel_' + (+selNum+1)];
}
var nextSel = getNextSel(sel) ;
// set the options for the next select
// based on the seleted option
// Now clear any subsequent select
while (nextSel = getNextSel(next Sel)) {
nextSel.options .length = 1;
}
}
Untested of course, but hopefully you get the idea.
--
Rob- Hide quoted text -
Excellent idea, Rob, thanks. I follow your logic there, and I'm pretty
sure it will work perfectly!
Jason This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: kaeli |
last post by:
All,
I have need of a readonly select element that looks and acts disabled to
the user. The problem with the disabled attribute is that the value
isn't passed to the handler, so I'm using readonly. Problem with
readonly is that is allows focus, which when the user highlights, then
hits backspace (as if to change the field), the browser does a
history.back. This is confusing to users.
The following code works great in NN6, but IE...
|
by: Niels |
last post by:
Hi group,
I have some problems with clearing floated divs. My usual method works fine in Konqueror, but not in Firefox. Here's an example:
<html><body>
<div id='left' style='float:left; border:1px solid red;'>Floated left</div>
<div id='right' style='float:right; border:1px solid blue;'>Floated right</div>
|
by: Christopher Benson-Manica |
last post by:
I'm trying to dynamically change the visibility of a table row. I can
hide the row, but I'm having trouble making it visible again. This is
what I have:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<script type="text/javascript">
function ready() {
|
by: hortoristic |
last post by:
We are using JavaScript to Enable/Disable certain fields on web pages
based on business rules.
A simple example is if when using an option type tag, and the two
options are Yes and No. If YES is selected - enable a field to use
the M$ Datepicker. Using the code below works for most of our fields,
however the problem is that when the field is re-enabled - it
remembers the original date or data prior to it being disabled -
despite the...
|
by: Andrey Tarasevich |
last post by:
Hello
Consider the following HTML code sketch
<div>
<img src="..." style="float: left">
<p>Paragraph text</p>
</div>
<hr>
| |
by: S P Arif Sahari Wibowo |
last post by:
Hi!
Do you know how to put a form's Access-Visual-Basic-code that will force
the form to be inserted, while the user has not type anything in the form,
without changing focus, selection, etc.?
Here is the story.
I have this structure:
|
by: ed |
last post by:
Hello-
i'm having some problems getting innerhtml to clear on mozilla, but it
works fine in ie. my page is setup such that i have a div:
<div id="otherModel"></div>
on a select from a combo box, in my javascript i execute:
div = document.getElementById("otherModel");
depending on what's selected in a combobox, i execute:
|
by: andypb123 |
last post by:
Hello,
The onchange event fires in IE6 in a SELECT element when scrolling
through the list with the up and down arrows on the keyboard. In
Firefox it only fires after you hit the enter key, which is the
behaviour I want make happen in IE.
Does anyone know how to accomplish this?
Thanks a lot
Andy Birchall
|
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: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
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: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
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: 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: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
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...
| |