Can anyone give me a quick code snippet (that is standards-based) for adding
OPTION tags to a SELECT dynamically. I have no problem doing it in IE but I
am kind of new to the whole standards world and can't figure out how to make
it work in, for instance, Firefox. Right now the code I am using is as
follows:
newOpt=document.createElement('OPTION');
newOpt.id='optKeyword';
newOpt.label='Keyword';
document.getElementById('slctCategory').add(newOpt );
This code won't work in IE OR Firefox since neither of them operate
according to the standard defined in HTML 4.01 where the label property
should be used as the option contents if it is set. If I change it from
setting the label property to setting the text property, it works in IE, but
not in Firefox. According to HTML 4.01 the text property is supposed to be
read only, thus I would expect that's the reason it doesn't work in Firefox.
Anyways, some help on this would be appreciated!
David 10 4840
In response to my previous post, I have discovered that I CAN set the text
property in Firefox as well and it works (though I still recall reading that
it is supposed to be a readonly property). Anyways, now my problem is the
following line:
document.getElementById('slctCategory').add(newOpt );
If I use this line in IE, it works fine, but it won't work like this in
Firefox, as it expects a final argument, so if I put it like this it works:
document.getElementById('slctCategory').add(newOpt ,null);
I have NO idea why on earth it should expect that final argument,
particularly when it has to be null, but Firefox will not add the new option
otherwise. Anyways, I could obviously use my global "isIE" variable to make
the code branch here but that is something I am trying to avoid. Is there a
different way of going about this all which would be better?
"David" <dk****@hotmail.com> wrote in message
news:h8********************@comcast.com... Can anyone give me a quick code snippet (that is standards-based) for adding OPTION tags to a SELECT dynamically. I have no problem doing it in IE but I am kind of new to the whole standards world and can't figure out how to make it work in, for instance, Firefox. Right now the code I am using is as follows:
newOpt=document.createElement('OPTION'); newOpt.id='optKeyword'; newOpt.label='Keyword'; document.getElementById('slctCategory').add(newOpt );
This code won't work in IE OR Firefox since neither of them operate according to the standard defined in HTML 4.01 where the label property should be used as the option contents if it is set. If I change it from setting the label property to setting the text property, it works in IE, but not in Firefox. According to HTML 4.01 the text property is supposed to be read only, thus I would expect that's the reason it doesn't work in Firefox. Anyways, some help on this would be appreciated!
David
David wrote: In response to my previous post, I have discovered that I CAN set the text property in Firefox as well and it works (though I still recall reading that it is supposed to be a readonly property). Anyways, now my problem is the following line:
document.getElementById('slctCategory').add(newOpt );
If I use this line in IE, it works fine, but it won't work like this in Firefox, as it expects a final argument, so if I put it like this it works:
document.getElementById('slctCategory').add(newOpt ,null);
I have NO idea why on earth it should expect that final argument, particularly when it has to be null, but Firefox will not add the new option otherwise. Anyways, I could obviously use my global "isIE" variable to make the code branch here but that is something I am trying to avoid. Is there a different way of going about this all which would be better?
"David" <dk****@hotmail.com> wrote in message news:h8********************@comcast.com...
Can anyone give me a quick code snippet (that is standards-based) for adding OPTION tags to a SELECT dynamically. I have no problem doing it in IE but I am kind of new to the whole standards world and can't figure out how to make it work in, for instance, Firefox. Right now the code I am using is as follows:
newOpt=document.createElement('OPTION'); newOpt.id='optKeyword';
If you are adding multiple options, ensure the IDs are unique.
newOpt.label='Keyword';
Option elements do not have a 'label' property. Label elements can
contain form controls, but an option element is not a form control, it's
the child of a select (which is a form control). At least that is my
reading of the spec.
document.getElementById('slctCategory').add(newOpt );
The following should suit:
var txt = 'Keyword';
var val = 'Some value';
var newOpt = new Option( txt, val, false, true );
myList.options[myList.options.length] = newOpt;
'txt' is the option text, 'val' the option value and 'false' modifies
the option's selected attribute (true would make the option selected).
The first two parameters are required, the rest can usually be omitted
but it's probably good practice to include them.
I'm not sure it's 100% 'DOM compliant', but the real test is whether it
works reliably in the great majority of browsers without undue
side-effects - I think it meets those criteria.
There is a thread here that may help:
<URL:http://groups-beta.google.com/group/comp.lang.javascript/browse_frm/thread/af6e808b089f60f8/0a5222cd15fc5e11?q=add+option+select+drop+down+IE& rnum=3&hl=en#0a5222cd15fc5e11>
[...]
--
Rob
RobG wrote:
[...] The following should suit:
var txt = 'Keyword'; var val = 'Some value'; var newOpt = new Option( txt, val, false, true ); myList.options[myList.options.length] = newOpt;
'txt' is the option text, 'val' the option value and 'false' modifies the option's selected attribute (true would make the option selected). The first two parameters are required, the rest can usually be omitted but it's probably good practice to include them.
Forgot to add that the last parameter (set to 'true' above) sets whether
the option is the currently selected option.
--
Rob
David wrote: In response to my previous post, I have discovered that I CAN set the text property in Firefox as well and it works (though I still recall reading that it is supposed to be a readonly property). Anyways, now my problem is the following line:
document.getElementById('slctCategory').add(newOpt );
If I use this line in IE, it works fine, but it won't work like this in Firefox, as it expects a final argument, so if I put it like this it works: document.getElementById('slctCategory').add(newOpt ,null);
I have NO idea why on earth it should expect that final argument, particularly when it has to be null, but Firefox will not add the new option otherwise. Anyways, I could obviously use my global "isIE" variable to make the code branch here but that is something I am trying to avoid. Is there a different way of going about this all which would be better?
"David" <dk****@hotmail.com> wrote in message news:h8********************@comcast.com... Can anyone give me a quick code snippet (that is standards-based) for adding OPTION tags to a SELECT dynamically. I have no problem doing it in IE but I am kind of new to the whole standards world and can't figure out how to make it work in, for instance, Firefox. Right now the code I am using is as follows:
newOpt=document.createElement('OPTION'); newOpt.id='optKeyword'; newOpt.label='Keyword'; document.getElementById('slctCategory').add(newOpt );
This code won't work in IE OR Firefox since neither of them operate according to the standard defined in HTML 4.01 where the label property should be used as the option contents if it is set. If I change it from setting the label property to setting the text property, it works in IE, but not in Firefox. According to HTML 4.01 the text property is supposed to be read only, thus I would expect that's the reason it doesn't work in Firefox. Anyways, some help on this would be appreciated! David
Try
document.getElementById('slctCategory').appendChil d(newOpt);
instead.
--
Stan
Thanks to those who helped out, both suggestions worked. Funnily enough, I
knew about, but had ruled out, the newOpt = new Option(....) method because
I believed it to be IE-specific, but I guess I was wrong there. Anyhow, I'm
sure I'll have lots more questions to come as my project goes on.
Thanks again,
David
David wrote: the newOpt = new Option(....) method because I believed it to be IE-specific
not at all !
it is a very old Javascript way of doing
stil in use ;-)
--
Stephane Moriaux et son [moins] vieux Mac
"David" <dk****@hotmail.com> wrote: Can anyone give me a quick code snippet (that is standards-based) for adding OPTION tags to a SELECT dynamically. I have no problem doing it in IE but I am kind of new to the whole standards world and can't figure out how to make it work in, for instance, Firefox. Right now the code I am using is as follows:
newOpt=document.createElement('OPTION'); newOpt.id='optKeyword'; newOpt.label='Keyword'; document.getElementById('slctCategory').add(newOpt );
The code I got was from <http://www.mredkj.com/tutorials/tutorial005.html>
and it explained what to use and why....here's my slight tweaking of it to
make it more general:
function addOption(elSel,newText,newValue, elOptOld) {
// have to call createElement for EACH new option
var elOptNew = document.createElement('option');
var newIndex;
elOptNew.text = newText;
elOptNew.value = newValue;
try { // standards compliant method; doesn't work in IE
elSel.add(elOptNew, elOptOld);
} catch(ex) {
if (elOptOld != null) {
newIndex = elOptOld.index+1
} else {
newIndex = elSel.length +1
}
elSel.add(elOptNewm, newIndex); // IE only
}
}
But I have my own problem, related to this (as I just posted in a different
group)...
I'm using one menu to populate another (i.e. teams/players cars/makes that
kind of thing), and I'd like to be able to hide the 2nd menu, and it's
label when the menu is empty.
Hiding the menu is no problem, but I don't know how to find the menu's
label. Any suggestions (other than givign the label an ID, I know that
would work, but would prefer something a more general).
--
J.B.Moreno
"J. B. Moreno" <pl***@newsreaders.com> wrote in message
news:20*******************@newsreader.com... "David" <dk****@hotmail.com> wrote:
Can anyone give me a quick code snippet (that is standards-based) for adding OPTION tags to a SELECT dynamically. I have no problem doing it in IE but I am kind of new to the whole standards world and can't figure out how to make it work in, for instance, Firefox. Right now the code I am using is as follows:
newOpt=document.createElement('OPTION'); newOpt.id='optKeyword'; newOpt.label='Keyword'; document.getElementById('slctCategory').add(newOpt );
The code I got was from <http://www.mredkj.com/tutorials/tutorial005.html> and it explained what to use and why....here's my slight tweaking of it to make it more general:
function addOption(elSel,newText,newValue, elOptOld) { // have to call createElement for EACH new option var elOptNew = document.createElement('option'); var newIndex;
elOptNew.text = newText; elOptNew.value = newValue;
try { // standards compliant method; doesn't work in IE elSel.add(elOptNew, elOptOld); } catch(ex) { if (elOptOld != null) { newIndex = elOptOld.index+1 } else { newIndex = elSel.length +1 } elSel.add(elOptNewm, newIndex); // IE only } }
But I have my own problem, related to this (as I just posted in a different group)...
I'm using one menu to populate another (i.e. teams/players cars/makes that kind of thing), and I'd like to be able to hide the 2nd menu, and it's label when the menu is empty.
Hiding the menu is no problem, but I don't know how to find the menu's label. Any suggestions (other than givign the label an ID, I know that would work, but would prefer something a more general).
-- J.B.Moreno
In regards to your question about finding the label, I really don't know the
exact situation but is it possible to use parentNode, childNodes, or
nextSibling properties/collections to access the label relative to each
menu? Also might try using getElementsByTagName on the parent element of
the menu/label to get a collection of all elements with the label's tag name
within the parent. Then you can use the returned collection and choose the
index within the collection which is the label element. Kinda hard to be
very specific without a look at the HTML structure you are using but I hope
maybe one of these might get you started in the right direction.
"David" <dk****@hotmail.com> wrote: "J. B. Moreno" <pl***@newsreaders.com> wrote in message
-snip- I'm using one menu to populate another (i.e. teams/players cars/makes that kind of thing), and I'd like to be able to hide the 2nd menu, and it's label when the menu is empty.
-snip-
In regards to your question about finding the label, I really don't know the exact situation but is it possible to use parentNode, childNodes, or nextSibling properties/collections to access the label relative to each menu?
Pretty much my question exactly!
Also might try using getElementsByTagName on the parent element of the menu/label to get a collection of all elements with the label's tag name within the parent. Then you can use the returned collection and choose the index within the collection which is the label element. Kinda hard to be very specific without a look at the HTML structure you are using but I hope maybe one of these might get you started in the right direction.
I would like to assume the minimal structure possible....
<form action="something" method="post">
<label for="team">
Teams:
<select name="team" id="team">
<option>Great</option>
</select>
</label>
</form>
--
J.B.Moreno
"David" <dk****@hotmail.com> wrote: "J. B. Moreno" <pl***@newsreaders.com> wrote in message
-snip- But I have my own problem, related to this (as I just posted in a different group)...
I'm using one menu to populate another (i.e. teams/players cars/makes that kind of thing), and I'd like to be able to hide the 2nd menu, and it's label when the menu is empty.
Hiding the menu is no problem, but I don't know how to find the menu's label. [...]
In regards to your question about finding the label, I really don't know the exact situation but is it possible to use parentNode, childNodes, or nextSibling properties/collections to access the label relative to each menu?
Thanks, that does it.
<script type="text/javascript">
var oldStyle='none';
function hideTest(menuName) {
var tMenu = document.getElementById(menuName)
var tP = tMenu.parentNode;
var tS;
while (tP.nodeName.toLowerCase() != 'form' &&
tP.nodeName.toLowerCase() != 'label') {
tP = tP.parentNode;
}
if (tP.nodeName.toLowerCase()=="form") { tP = tMenu; }
tS = tP.style.display;
tP.style.display = oldStyle;
oldStyle = tS;
}
</script>
--
J.B.Moreno This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: daveland |
last post by:
I am working on some JavaScript that dynamically adds rows to a table
in response to a button click. A new row does appear on the screen
when the button is clicked. However, that table to which a...
|
by: Stewart |
last post by:
Dear comp.lang.javascript,
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...
|
by: David |
last post by:
I have a one-line script to add an onunload event handler to the body of the
document. The script is as follows:
document.getElementsByTagName("BODY").onunload=function s() {alert("s")}
Now...
|
by: Michelle |
last post by:
I have a div that is initially empty. Clicking on a button will add some
text boxes and other controls so the user can add additional records. In
IE
all works fine but in Netscape 7.0 when I add...
|
by: |
last post by:
What is the beat way to dynamically write/add to the HEAD
tag of an ASPX page (the <head runat=server ... is too
error prone and not very repeatable)?
Thanks.
| |
by: Sileesh |
last post by:
Hi
I have html table and a Button in an Aspx page. I am adding one row with
some textboxes to Html table each time i click on the Button thru Javascript.
Now problem is when when i try to...
|
by: Nathan Sokalski |
last post by:
I am trying to dynamically add controls to my page, but am having trouble
with controls such as buttons. I have been able to add simple controls such
as Label controls, because they can be placed...
|
by: joseph.lindley |
last post by:
Forgive me for I am a bit of a web-dev novice - but I'm not doing too
bad.
I'm currently working with a bit of javascript to dynamically add
<option>s into a select box. My code currently works...
|
by: CapRand |
last post by:
Hi,
I am creating an ASP.NET site and have created a form which I have
been able to dynamically with listboxes, labels etc from a database -
using mainly form1.Controls.Add .....
Does anyone...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
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,...
| |
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...
|
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,...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
|
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...
|
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...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| |
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 ...
| |