...

View Full Version : Change a Select Box value with Javascript?



XTREEMMAK
04-30-2008, 08:14 PM
Here's the code that I'm working with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type ="text/javascript">
function HouseSel(){
document.getElementById("HouseSelect").value = '3'
alert (document.getElementById("HouseSelect").value);
}
</script>
</head>

<body>


<form action="https://www.paypal.com/us/cgi-bin/webscr" method="post" name="_xclick">

<select name="item_name" id="HouseSelect">
<option value="0" selected="selected">--Please Select a House--</option>
<option value="1">Nags Head</option>
<option value="Rent Deposite: Calibre: ">Calibre</option>
</select>

<input name="calculate3" type="button" id="calculate3" tabindex="2"
onclick="HouseSel(); " value="Calculate"/>
</form>
</body>
</html>


But it's still returning the initial value. How do I get it to 3?

Bill Posters
04-30-2008, 08:56 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">

function HouseSel(){

var selectEl = document.getElementById('HouseSelect');

var optionEls = selectEl.getElementsByTagName('option');
for (var i = 0, oEl; oEl = optionEls; i++) {
// loop counts start from 0, so the 3rd option: 0, 1, [i]2
oEl.selected = (i == 2) ? 'selected' : false;
}

alert(selectEl.selectedIndex);

}

</script>
</head>

<body>

<form action="https://www.paypal.com/us/cgi-bin/webscr" method="post" name="_xclick">

<select name="HouseSelect" id="HouseSelect">
<option>--Please Select a House--</option>
<option value="1">Nags Head</option>
<option value="Rent Deposite: Calibre: ">Calibre</option>
</select>

<input type="button" value="Calculate" name="calculate3" id="calculate3" tabindex="2" onclick="HouseSel(); " />

</form>
</body>
</html>

greatbigmassive
03-13-2011, 04:26 PM
Just to update this post further for anyone else passing by...
The example solution previous is doing more than it needs to.

If we know the "Calibra" item is item number 3 in the select box then we don't need to do any looping to find it do we?
We would only need to do a loop if we were searching for a value and we didn't know what index value the item was located at in the list.
When working with arrays, the visible item 3 is actually item 2 when you are using arrays. As we know arrays start at 0 at the first item.

ANY HOOOO....
If you have a static list of items and you want to quickly set an item using the index number you could solve this question with this answer:

document.getElementById('HouseSelect').getElementsByTagName('option')[2].selected = 'selected'

More information!...
The original question by "XTREEMMAK" above shows the option value as being "Rent Deposite: Calibre:".
We have to assume that this is a static form whereby the user just wants to pass in some friendly labels in the background.

If you have a dynamic selection box and you can't predict where your item will be, it's always best to refer to the item using its value (as I already mentioned).
What's a dynamic selection box? - A dynamic selection box is usually made up of items that are managed from a separate screen and items can be added or removed from the list.
Normally, dynamic selection boxes use ids or keywords as their values. These are then used as a reference when the item is submitted.


Here's an example of a select box that uses keyword values and friendly labels.


<select id='foo'>
<option value='red'>Nice Red</option>
<option value='blue'>Deep blue</option>
<option value='green'>Clean green</option>
</select>

You could set the active selection to be "Clean green" by doing:

document.getElementById('foo').value = 'green';
This means that we don't have to know WHERE the item is, we just have to know the keyword to refer to.

To do this using the loop method you would do:

var opts = document.getElementById('foo').getElementsByTagName('option');
for (var i=0;i<opts.length;i++){
opts[i].selected = (opts[i].value == "green"?"selected":"");
}

Hope that helps a bit more!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum