We Keep Coding

Triggering an event

I have a target website where there is the following dropdown menu.
<select class="categories-options" data-level="1" name="level1-option" id="level1-option" required="">
<option value="">default</option>
<option value="p1" data-href="/callback/p1">P1</option>
<option value="p2" data-href="/callback/p2">P2</option>
<option value="p3" data-href="/callback/p3">P3</option>
</select>
When an item is selected from the menu, it triggers a "change" event and a function is called when this event happens. I have debugged the event using Chrome and you can see the debugging output when I selected an item from the dropdown menu. I have taken a screenshot from the debugger.
Now, let me explain what I am trying to do. I use a javascript function to select an item from the dropdown menu using the following code:
var id= document.getElementById('level1-option');
setSelectedValue(id, "p2");
$('#level1-option').trigger("select");
In the last line, I try to trigger the same event that happens originally in the webpage as if I manually selected the item. however, it doesn't trigger anything. |I see in the debug output that the event is triggered by class. I have tried many different things but didn't work. Could anyone shed some light on this issue? How can I trigger the same event that happens in that webpage using jquery or javascript?

Your code:
$('#level1-option').trigger("select");
...will trigger an event called select (which isn't related to the value of a form field change), but the event you stopped on in the debugger is change, not select:
If you want to trigger the change event, trigger the change event:
$('#level1-option').trigger("change");
// Difference is here -------^
Side note: Because you're using jQuery, your code can be simpler, you dont need the getElementById or the setSelectedValue:
$('#level1-option').val("p2").trigger("change");

Try this
$('#level1-option').trigger("change");

Variable values on event tracking on a dynamic button with dropdown form

I am wanting to track the option chosen in 2 dropdown lists within a form. Below I have placed an example of the HTML that controls the form. The page the form is on is a dynamic secure page. After filling out one form, it changes to another without the URL changing.
I read on stackoverflow you can't use onClick on option fields. So I am wondering how I would set up event tracking in my scenario.
List 1
<div>
<p>What is your favorite fruit?</p>
<select id="list1">
<option value="a">apple</option>
<option value="b">banana</option>
<option value="c">cherry</option>
</select>
</div>
<a href="#"> <!-- Click here first to see the next dropdown menu, URL won't change -->
List 2
<div>
<p>What is your 2nd favorite fruit?</p>
<select id="list2">
<option value="a">apple</option>
<option value="b">banana</option>
<option value="c">cherry</option>
</select>
</div>
<a href="#"> <!-- This is the second time the same button is clicked. -->
If I could I would add each option tag with an onClick, but can't. Learned that on stackoverflow. So the disguised as a button is all I have. I just don't know how to post the dynamic selections to Google.
<a onClick="_gaq.push(['_trackEvent', 'listId', 'optionValue']);"
Since I click twice on the dynamic tag that is a button, how can I grab the value and the select ID each time? How do I post to google a variable based on ID for the list and the value for the option.
Is setting up in the dynamically used a tag, a smart way of doing the event tracking. Is there a cleaner way of setting up event tracking on my site for this form?

Presumably (since the form changes after selection) there is a javascript callback that does the changing. So you would place you analytics tracking call into that callback and read the selected value before the form changes. This requires control over the js code.
If the form is changed via an ajax call you might want to look if the setup of your page allows you to hook into the ajax success event. Jquery has global ajax event handlers, in prototype.js the same thing is called ajax responders and I'm sure other frameworks have something similar.
Another, and possibly the easiest way is to attach the onclick event to the link that changes the form and write a function that selects the value for the selected option.
Using jquery it could look like this:
$('#list1').find(":selected").value();
In plain javascript it should look like this (untested):
var list = document.getElementById("list1");
var selection = list.options[list.selectedIndex].value;
So your complete callback would look something like:
function getSelection(element) {
var list = document.getElementById(element);
var selection = list.options[list.selectedIndex].value;
_gaq.push(['_trackEvent', element , selection);
}
You'd need to attach this to the onclick event of the link and pass the id of the combobox as parameter.

Using jQuery to hide drop-down, but it fails

There are two drop-downs i'm using in my document. One is visible, one i have to hide. Below is the script I have used to hide the drop-down:
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('span[ds="Product Plan Type"]').css('visibility', 'hidden');
});
</script>
Using the above code: initially the drop-down disappears, but if another drop-down is used to select any other option, when processed for that, the page refreshes and shows the drop-down back.
Could anyone suggest something?

if your second drop down is not required during first load then you can set them hidden in code itlsef like
<asp:DropDownList runat="server" style="visibility:hidden">
</asp:DropDownList>
now as per your statement second drop down get filled base on first value selected (during page load)
so you can place javascript code where you can check if value =Product Plan Type
then you can how second drop down by javascript or you can do that using server side as well

use css display on element which you have hide
style="display:none"

Detect if the selected value in <select> is selected again [duplicate]

Here is my simple code:
$(".test").change(function(){
alert("user clicked");
});
<select class="test">
<option value="1">test1</option>
<option value="2">test2</option>
</select>
It's all simple and working, but I want to get that function called not only when user changes option, but when he clicks on the same option that is already selected, I've tried click event but it gets fired up before user even clicka on any option, what could I do?

doesn't work in chrome.
$(".test option").click(function(e){
console.log('click');
});
updated your fiddle.
put the click on the option
EDIT: looks like it isn't possible without a bunch of work like using click on the select and comparing the location it was clicked or something hokey like that.
I am not sure what the end goal is, but the click on the select might work if you can do the processing one extra time when they initially click into it.
another article on it:

If you mean that there is only one thing in the select (like in the problem I was having), you could create a default disabled option, and set that as the selected. This would mean that if you had one option, onchange would fire because the disabled was the one that was previously selected:
<option disabled selecte>Select an option</option>
<option> Only Option </option>

Keeping jQuerys .change() from running on page load

I have a page that has multiple select lists and when ever one of the select list changes using jQuery's .change() function I change the text in a span next to the select list. When the page loads there is already some text in every span (the text different for each span). The problem is that when the page loads the .change() function loops through all of the select lists changing the text in every span. I don't want the text in the span to change until a user selects a different item in the list. I can't just check to see if there is text in the span because if a user does change the selected item it doesn't matter if there is any text or not, I just don't want to to replace the text when the page loads. So, how can I get the .change() function to stop firing when the page is loaded? The code:
JS/jQuery
$(document).ready(function() {
$("select").change(function () {
var txt = $(this).val();
$(this).next('span').text(txt);
}).trigger('change');
});
HTML (repeated many times)
<select name="animal[]">
<option value="dog" selected="selected">dog</option>
<option value="cat">cat</option>
<option value="bird">bird</option>
<option value="snake">snake</option>
</select>
<span class="out">text that shouldn't be replaced until user changes selected item</span>
Thanks for your help!

You just need to remove this call:
.trigger('change')
It's what's invoking the $("select").change(function () { ... }) handler that you just bound. The default behavior is to wait for the change event to occur...a .trigger('change') or .change() (no parameters) will simulate the change event, making that handler go to work.

The "change" is triggering because your code is telling it to! That call to .trigger("change") says, "run the 'change' event handler please". So, take that out.
Now, the thing is, the reason your code was written that way was probably to make sure that the settings of the <select> elements really reflects what the behavior is supposed to be when users manually make the same changes. For example, sometimes there are forms where part of the inputs are supposed to be disabled unless a <select> is set to a certain option. By triggering the "change" event on page load, the code could make sure that those rules are in force. If you just take out that trigger, things may not work right, is what I'm saying. That handler looks pretty simple, so maybe the problem is that this code was cut-and-pasted from somewhere else.