Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
set value of drop down
- Thread starter onressy
- Start date
You can't change the value of an option like that, you have to create a whole new option object for something like that. This example will change the value of the selected object to 7 (however, it will keep the text value the same as it was before - so if you have 2 selected the dropdown will still say "two", but the underlying value will be 7)
-kaht
[small]How spicy would you like your chang sauce? Oh man... I have no idea what's goin' on right now...[/small]
![[banghead]](/data/assets/smilies/banghead.gif "[banghead] [banghead]")
Code:
<script type="text/javascript">
function changeValue(obj) {
obj.options[obj.selectedIndex] = new Option(obj.options[obj.selectedIndex].text, 7);
}
</script>
<select id="blah" onchange="alert(this.value)">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<input type="button" value="set selected option value to 7" onclick="changeValue(document.getElementById('blah'))" />-kaht
[small]How spicy would you like your chang sauce? Oh man... I have no idea what's goin' on right now...[/small]
What sort of problems are you having with that line of code?
When I read it, it seemed like it might work. I coded it into the following page to see what might be going wrong.
This code does exactly what I would expect. I click B and I see that the option selected is 1, the value before is 2 and the value after is 7. I repeated this for each option, they all changed their values to 7. Then I selecte B again and found the value before was 7 already.
I also looked at the Javascript Console in Foxfire. It displayed a warning about the use of a global reference and suggested using a newer style of coding, but it was not an error, just an advice.
Tell us what you wish to achieve and what errors you see.
When I read it, it seemed like it might work. I coded it into the following page to see what might be going wrong.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Javascript Questions</title>
</head>
<body>
<form name="bookform">
<select name="NumGuests" onchange="setValue();">
<option value="1" SELECTED>A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</form>
<script>
function setValue () {
var indexOfSelectedOption = bookform.NumGuests.selectedIndex;
var valueBefore = document.forms['bookform'].NumGuests.options[bookform.NumGuests.selectedIndex].value;
document.forms['bookform'].NumGuests.options[bookform.NumGuests.selectedIndex].value = "7";
var valueAfter = document.forms['bookform'].NumGuests.options[bookform.NumGuests.selectedIndex].value;
alert("Selected option: " + indexOfSelectedOption );
alert("Before: " + valueBefore + " After: " + valueAfter);
}
</script>
</body>
</html>This code does exactly what I would expect. I click B and I see that the option selected is 1, the value before is 2 and the value after is 7. I repeated this for each option, they all changed their values to 7. Then I selecte B again and found the value before was 7 already.
I also looked at the Javascript Console in Foxfire. It displayed a warning about the use of a global reference and suggested using a newer style of coding, but it was not an error, just an advice.
Tell us what you wish to achieve and what errors you see.
- Status
Similar threads
- Locked
- Question
- Locked
- Question