Changing selected value of options tag

[Robert Bravery]

HI all,
In JS, how can I change the selected value of a dropdownlist(select options)
I know the value of indexed value of the selected value before it is
changed.

Thanks
Robert

 

[Erwin Moller]

HI all,
In JS, how can I change the selected value of a dropdownlist(select
options) I know the value of indexed value of the selected value before it
is changed.

Thanks
Robert

Hi Robert,

Just change the value of the OPTION object, like this:

<form name="myFruitsForm" action="bla.php">
<SELECT name="fruit" onChange="changeValue();">
<OPTION value="apple">apple
<OPTION value="orange">orange
<OPTION value="pear">pear
</SELECT>
</form>

<script type="text/javascript">
function changeValue(){
// this function makes juice of your fruit.
var selInd = document.forms["myFruitsForm"].fruit.selectedIndex;
// get the option object
var myOption = document.forms["myFruitsForm"].fruit[selInd];
// and change into fruitjuice:
myOption.value = myOption.value + "juice";

// optionally change the text:
myOption.text = myOption.text + " just juiced!";
}
</script>

Regards,
Erwin Moller

 

[Robert Bravery]

HI erwin,
Thanks for this. This actually helps in a ntoher portion of my app.
But to get to this one
I think I did'nt explain myself correctly
Taking your example below
If when the webform is opened and the 'apple option is selected'
The user then makes a selection, and if they select 'orange' I want to do
something like
Alert("Sorry oranges are out of stock")
then change the selected option back to its original selection, that being
'apple'
so that when the user closes the alert box, orange is no longer selectd but
apple is

Thanks
Robert

"Erwin Moller"

HI all,
In JS, how can I change the selected value of a dropdownlist(select
options) I know the value of indexed value of the selected value before it
is changed.

Thanks
Robert

Hi Robert,

Just change the value of the OPTION object, like this:

<form name="myFruitsForm" action="bla.php">
<SELECT name="fruit" onChange="changeValue();">
<OPTION value="apple">apple
<OPTION value="orange">orange
<OPTION value="pear">pear
</SELECT>
</form>

<script type="text/javascript">
function changeValue(){
// this function makes juice of your fruit.
var selInd = document.forms["myFruitsForm"].fruit.selectedIndex;
// get the option object
var myOption = document.forms["myFruitsForm"].fruit[selInd];
// and change into fruitjuice:
myOption.value = myOption.value + "juice";

// optionally change the text:
myOption.text = myOption.text + " just juiced!";
}
</script>

Regards,
Erwin Moller

 

[Erwin Moller]

HI erwin,
Thanks for this. This actually helps in a ntoher portion of my app.
But to get to this one
I think I did'nt explain myself correctly
Taking your example below
If when the webform is opened and the 'apple option is selected'
The user then makes a selection, and if they select 'orange' I want to do
something like
Alert("Sorry oranges are out of stock")
then change the selected option back to its original selection, that being
'apple'
so that when the user closes the alert box, orange is no longer selectd
but apple is

Hi Robert,

For that to work you'll have to store the value of the initially selected
somewhere in your script.
Then if they change the selected one, you check if it is legal.
if not, change back to old value.
(I wonder why you offer an option if it is not usefull, but that is beside
the technical point.)

And since I don't feel like real work today, try this:


<form name="myFruitsForm" action="bla.php">
<SELECT name="fruit" onChange="changeValue();">
<OPTION value="apple">apple
<OPTION value="orange">orange
<OPTION value="pear">pear
<OPTION value="pineapple">pineapple
</SELECT>
</form>

<script type="text/javascript">

var initialSelectedInd = document.forms["myFruitsForm"].fruit.selectedIndex;
var notInStore = new Array("pear","orange");

function changeValue(){
var theSelect = document.forms["myFruitsForm"].fruit;
var selVal = theSelect[theSelect.selectedIndex].value;
// In store?
var inStore = true;
for(var i=0;i<notInStore.length;i++){
if (selVal == notInStore){
inStore = false;
break;
}
}
if (inStore){
// ok, set this value to remember
initialSelectedInd =
document.forms["myFruitsForm"].fruit.selectedIndex;
} else {
alert("We do not sell "+selVal+". Come back after harvest.");
// set back to original value
theSelect[initialSelectedInd].selected = true;
}

}
</script>


Make sure the first call:
var initialSelectedInd = document.forms["myFruitsForm"].fruit.selectedIndex;

is placed after the form.
If you place it above the form the browser will have trouble getting its
initial value (since the form or the selectbox don't exist). Alternatively
use unLoad() in the bodytag.

Regards,
Erwin Moller

 

[Robert Bravery]

Hi Robert,

For that to work you'll have to store the value of the initially selected
somewhere in your script.
Then if they change the selected one, you check if it is legal.
if not, change back to old value.
(I wonder why you offer an option if it is not usefull, but that is beside
the technical point.)

Thanks for the reponse. Worked great.
For youre wonderings, this is a claim status selection, but We cannot allow
a claim status to represent closed, if there is an outstanding amount. SO I
check for closed and amount != 0 IF this is the case, we cannot use a closed
type status, so it has to warn the user, and then change back to it original
setting. However if there is no outstanding amount then allow the change


Thanks
Robert