PDA

View Full Version : changing select

chrismiceli
10-07-2002, 11:47 PM
hi, i have a <select> and some options to it, i want to know how to change the option part that is bold in the following situation


<select name="test">
<option name="test0">hi</option>
</select>
whammy
10-08-2002, 01:36 AM
How and when do you want to change it?

To change it, type something else in there... or have your script write it for you...

But that's not the value you want to change... you want to change the "value"... i.e.:

<option value="something">What is written here doesn't matter!</option>

options don't have a name... that is incorrect HTML or XHTML, and I don't know any browser that would render it... although perhaps IE would, since it's crazy.
whammy
10-08-2002, 01:41 AM
P.S. If you want to change the value using javascript (which won't change the initial value you put in between the option tags), do something like:

document.form1.myselectname.options[document.form1.myselectname[0].value = "blah";

Not tested, but I have used that kind of thing...
ahosang
10-08-2002, 01:45 AM
Yes, be careful of your HTML and use values as whammy said, but if you do need the text of the option to change, use:
document.getElementById("test0").text="something else";

<option id="test0">HI</option>
glenngv
10-08-2002, 02:33 AM
the correct (and cross-browser) way to change the option text:

document.myform.test.options[0].text="hello";

<form name="myform">
<select name="test">
<option value="test0">hi</option>
</select>
chrismiceli
10-08-2002, 02:58 AM
i tried everyone of those, the one with getElmentsById("test0") said this object doesn't support this property or method, i tried the <option value="hi"> what is here doesn't matter</option> It does matter, hi never shows up anywhere. i tried this, but no luck
document.myform.test.options[0].text="hello", it said it was null or not an object. I looked at the double combo box at javascript kit but didn't want to use all that code, could someone help, thanx for the help though guys.
glenngv
10-08-2002, 03:18 AM
document.formname.selectname.options[0].text="hello";

change all italics to appropriate names and you should call this once the page has load.
ahosang
10-08-2002, 03:26 AM
Actually, document.myform.etc.etc won't work on DOM strict browsers such as Netscape 6.
getElementById won't work on IE 4 though.
Try:
<form name="myForm">
<select name="test">
<option id="test0">hi</option>
</select>
</form>

document.forms["myForm"].test.options["test0"].text="new text";

If this doesn't work, you'll have to show us an example of what you're doing
chrismiceli
10-08-2002, 01:37 PM
here is what I am trying and it isn't working, i just want to change the text from within a function, but it says the object doesn't support this property or method.


<html>
<head>
<title>hi</title>
</head>
<body>
<form name="myForm">
<select name="test">
<option id="test0">hi</option>
</select>
<input type="button" onClick="test()" value = "test">
</form>
<script language="javascript">
function test() {
document.myForm.test.options[0].text="hello";
}
</script>
</body>
</html>
chrismiceli
10-08-2002, 10:25 PM
*bump*
ConfusedOfLife
10-08-2002, 10:50 PM
<html>
<head>
<title>hi</title>
</head>
<body>
<form name="myForm">


<select name="OOPSE">
<option value="theImportantThing!">hi
</select>


<input type="button" onClick="test()" value = "test">
</form>
<script language="javascript">
function test() {
document.myForm.OOPSE.options[0].text = "This is the big change!";
}
</script>
</body>
</html>





It wasn't working coz you had two "test"s in your document, one as the value of the button and one for the select's name.
chrismiceli
10-08-2002, 10:54 PM
thanx, works great:thumbsup:
glenngv
10-09-2002, 01:54 AM
Originally posted by ConfusedOfLife


<html>
<head>
<title>hi</title>
</head>
<body>
<form name="myForm">


<select name="OOPSE">
<option value="theImportantThing!">hi
</select>


<input type="button" onClick="test()" value = "test">
</form>
<script language="javascript">
function test() {
document.myForm.OOPSE.options[0].text = "This is the big change!";
}
</script>
</body>
</html>





It wasn't working coz you had two "test"s in your document, one as the value of the button and one for the select's name.

DEFINITELY not because of the value of the button but the function test(). You should not have same names with function names, element names and variable names.

<html>
<head>
<title>hi</title>
</head>
<body>
<form name="myForm">


<select name="OOPSE">
<option value="theImportantThing!">hi
</select>


<input type="button" onClick="test()" value = "test">
</form>
<script language="javascript">
function test() {
document.myForm.OOPSE.options[0].text = "This is the big change!";
}
</script>
</body>
</html>
ConfusedOfLife
10-11-2002, 01:05 AM
Thanx Glen

I really didn't know that, I was wondering myself why it happend! Coz as we know javascript's compiler works from top to the bottom, so, if a function refers to one value with a specified name, the first value with that name should be excecuted and we shouldn't see any error message, but this really explains everything.