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.
精彩评论