Assign a value to a Option In a Select dropdown on the fly

I have a function that creates a Select dropdown on the fly:

function makeForm() {

mypara=document.getElementById(“paraID”);
myform=document.createElement(“form”);
myselect = document.createElement(“select”);

theOption=document.createElement(“OPTION”);
theText=document.createTextNode(“Revenue”);
theOption.appendChild(theText);
myselect.appendChild(theOption);

myform.appendChild(myselect);
mypara.appendChild(myform);
myselect.onchange=TitleOnChange;
mybreak=document.createElement(“p”);
myform.appendChild(mybreak);
}
function makeForm() {

mypara=document.getElementById(“paraID”);
myform=document.createElement(“form”);
myselect = document.createElement(“select”);

theOption=document.createElement(“OPTION”);
theText=document.createTextNode(“Revenue”);
theOption.appendChild(theText);
myselect.appendChild(theOption);

myform.appendChild(myselect);
mypara.appendChild(myform);
myselect.onchange=TitleOnChange;
mybreak=document.createElement(“p”);
myform.appendChild(mybreak);
}

I would guess that I have to add something like: theOption.setAttribute(“value”,“1”);

I want to be able to call the following function and execute a code base on the selection of the Select Dropdown:

<script type=‘text/javascript’>
function TitleOnChange()
{
if (document.form.select.value == “1”)
{
alert(“Value selected on the Select dropdonw is 1”);
}

}

</script>
<script type=‘text/javascript’>
function TitleOnChange()
{
if (document.form.select.value == “1”)
{
alert(“Value selected on the Select dropdonw is 1”);
}

}

</script>

I don’t know why is not working. I assigned the value 1 to the select dropdown theOption.setAttribute(“value”,“1”);

I call the TitleOnChange function myselect.onchange=TitleOnChange;

And Finally I indicate that if the value is equal to 1 do…

view plaincopy to clipboardprint?
if (document.form.select.value == “1”)
{
alert(“Value selected on the Select dropdonw is 1”);
}
if (document.form.select.value == “1”)
{
alert(“Value selected on the Select dropdonw is 1”);
}

Does anyone knows why this doesn’t work and how could I fix it?

Any helpt would be highly appreciate.

Thanks

Probably an easier way to dynamically create <select> options is to use the OPTION object instead.

Also, in the onchange event handler, you can access the <select>'s value and/or selectedIndex properties to then do other stuff.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css"></style>
        <script type="text/javascript">
            function doThis(obj){
                alert('selected value = '+obj.value+"\
selected index = "+obj.selectedIndex);
            }
            window.onload=function(){
                var mySelO = document.getElementsByName('mySel')[0];
                //creat the options
                var myOptions = [];
                myOptions[0] = new Option('tomatoes','1',false,false);
                myOptions[1] = new Option('oranges','2',false,false);
                myOptions[2] = new Option('lemons','3',false,false);
                myOptions[3] = new Option('pears','4',false,false);
                myOptions[4] = new Option('apples','5',false,false);
                //add options to the <select>
                for(i=0; i < myOptions.length; i++){
                    mySelO.options[mySelO.options.length] = myOptions[i];
                }
            }
        </script>
    </head>
    <body>
        <select name="mySel" onchange="doThis(this);"></select>
    </body>
</html>

There are a few potential pitfalls, but here’s my guess: You’re (1) assigning onchange to TitleOnChange and then (2) creating the TitleOnChange function in a different <script> block.

If that is what’s going on, then all you need to do is put them both in the same <script> block (any order should work).

Thank you so much all for your help.

I’ve being trying several things and I find out kind of a solution, but I’m stuck again.

This Code works. The red code line call the function TitleOnChange and Show the message “Hello World”.

[COLOR=“#0000CD”]function makeForm() {

mypara=document.getElementById(“paraID”);
myform=document.createElement(“form”);
myselect = document.createElement(“select”);

theOption=document.createElement(“OPTION”);
theText=document.createTextNode(“Revenue”);
theOption.setAttribute(“value”,“Revenue”);
theOption.appendChild(theText);
myselect.appendChild(theOption);

theOption=document.createElement(“OPTION”);
theText=document.createTextNode(“Expenses”);
theOption.appendChild(theText);
theOption.setAttribute(“value”,“Expenses”);
myselect.appendChild(theOption);

//now the select has the options added with their text, values and onChange event

myform.appendChild(myselect);
mypara.appendChild(myform);
myselect.onchange=TitleOnChange;
mybreak=document.createElement(“p”);
myform.appendChild(mybreak);

}[/COLOR]

function TitleOnChange()
{
alert(“Hello World”);
}

Now is funny, because if I change the code of the TitleOnChange Function to:

function TitleOnChange()
{
if (document.form.select.value == Revenue)
{
alert(“Revenue”);
}
if (document.form.select.value == Expenses)
{
alert(“Expenses”);
}
}

And this does not work.

I tried all the following combinations:

if (document.form.select.value == Revenue)
if (document.form.select.value == “Revenue”)
if (document.form.select.value = Revenue)
if (document.form.select.value = “Revenue”)

Thank you very much again

The function is assigned to the onchange event of the select field. When the onchange event fires and triggers the function, the function will have a reference to the select field via the this keyword.

That allows you to gain a reference to the form with this.form, or you can check the value of the field that triggered the event with this.value

Strictly speaking you should get the selectedIndex number of the select field, and then get the option value from that.
this.options[this.selectedIndex].value
But most web browsers will let you get away with just this.value on the select field.