SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member pelowe's Avatar
    Join Date
    Sep 2002
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript to call function from selected option

    This is probably a simple question but I'm not finding anything in my searches and I'm not a big javascript guru. Maybe I'm just too tired.
    First I have created a pulldown menu from a result set from a MySQL query in PHP. Some of the <option>'s are given an id="1" the rest are id="0".
    What I want to do is call a javascript function when one of the items with id="1" is selected. This is basically what I am trying to do:

    <javascript>
    function something(){
    if(<option id> == 1){
    alert('whatever');
    }
    }
    <script>
    <select onchange="something()">
    <option value="item1" id="1">item1</option>
    <option value="item2" id="0">item2</option>
    <option value="item3" id="0">item3</option>
    </select>
    So if "item 1" is selected an alert pops up.

    Thanks in advance for any help,
    pelowe

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First, generally an id has to be unique for each element. But, the way you are using the id, it will work, however you won't be able to do something like this:

    document.getElementById("0")

    because the element with id=0 is ambiguous.

    Select elements have an options[] array that has all the options in it, and the select element also has a .selectedIndex property that indicates which option is selected. So, to get the option that is selected you do this:

    <select onchange="something(this)">

    where 'this' refers to the <select> element. Then, inside the function:

    if(this.options[this.selectedIndex].id == "1") alert('whatever');

    Finally, the way your select is setup, the onchange won't fire when you want to choose the first option: the first option is selected by default. The only way to get it to fire is for the user to select another option and then change it back to the first option. So, you probably want to have a select like this:

    <select id="s0" name="s0">

    <option value="">destination code</option>
    <option id="1" value="0">0</option>
    <option id="0" value="1">1</option>
    <option id="0" value="2">2</option>

    </select>

  3. #3
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Attribute "id" has a special meaning in javascript -- it is identifier of an element and must be non-numeric and unique. Just use an other attribute name:

    Code:
    <scriprt>
    function foo(select) {
       alert(select.options[select.selectedIndex].getAttribute("myid"));
    }
    </script>
    <select onchange=foo(this)>
      <option myid=1>
      <option myid=0>
    etc

  4. #4
    SitePoint Member pelowe's Avatar
    Join Date
    Sep 2002
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks folks.
    Got it to work using a little info from both of you....


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
  •