Altering a page from a Greasemonkey script whenever a specific <option> is selected

While writing a GreaseMonkey script using jQuery and "tamtam", a question arose in my mind.

There is a page (which I can't edit) having a <select> element with four options. Option 2 is preselected.

<select id="idname" name="namename">
  <option>Option1</option>
  <option selected="selected">Option2</option>
  <option>Option3</option>
  <option>Option4</option>
</select>

Now I'd like to call the script when Option1 is selected. Option1 leads to another site I want to insert my script.

How would I write something like:

if (Option1 is selected) {
    perform the script
}

Would something like the following work?

if(document.getElementById("idname").getElementsByTagName("option")[0].onselect == true){
    perform the script 
}

If not, can you post a reference helping me?

Edit

I was able to create a function and an event handler.

function myCompute(Event) {
    with (this) {  
        var myTest = value;

        if (value == "option1") {
            $("#tabelle").show();
        }

        else {
            $("#tabelle").hide();
        }
    }
}

Event handlers:

$("#option-type").change (myCompute);
$("#tabelle").hide();

It works as follows: By choosing option 2,3 or 4 the table is hidden. By choosing option 1 the table is shown. By visiting the site option 2 is selected most of the time and nothing is shown. Now I got the case that option 1 is selected by visiting the site and no table appears, too. My idea was that the table should be shown when option1 is preselected.. I think that an EventHandler is missing. Like you, Brock Adams, said.

$("#option-type option:first").select (myCompute);
$("#option-type").change (myCompute);
$("#tabelle").hide();

If I bind the function with $("#tabelle").hide();, the table is hidden from 开发者_开发百科the very beginning. By changing the options to option1 the table is shown. How can I show the table when option 1 is selected and how can I hide the table when option 2,3,4 are selected?

Trying option:first results in an "unknown pseudo-element" error.

Update:

Ok, if I understand the revised question, the code now works as intended except when option 1 starts as selected. (PS, the id's of the given code should be edited to match up.)

If that's true, then just change this line:

$("#tabelle").hide();

.
To this:

if ($("#option-type")[0].selectedIndex == 0 )
    $("#tabelle").show();
else
    $("#tabelle").hide();

In Greasemonkey, you can't set event handlers that way due to sandbox protection. See Common Pitfalls in Greasemonkey.
Also, with jQuery, there are easier ways to select that element.

Something like: $("#idname option:first").select (YourEventHandler) should work.

Where:

function YourEventHandler (Event)  
{
    //YOUR CODE HERE
    //Note: Event is a variable passed automatically to all event handlers, you often just ignore it.
}

Handy jQuery reference.

You can use the .selectedIndex property to get which one's selected, like this:

if(document.getElementById("idname").selectedIndex === 0) { //option 1
  //perform the script
}

It's a 0-based index, so 0 is Option 1 in your example markup, you can test/play with it here.

I'm unclear from the question, but if you want this on the change event, it'd look like this:

document.getElementById("idname").onchange = function() {
  if(this.selectedIndex === 0) {
    //perform the script
  }
};

You cant test it here.