SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by samuvk View Post
    I want to be able to call the following function and execute a code base on the selection of the Select Dropdown:
    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.

    Code JavaScript:
    <!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+"\nselected 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>

  3. #3
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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).
    I'm the web overlord for Graphic Business Systems

  4. #4
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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".

    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);

    }



    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

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by samuvk View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •