Keeping jQuerys .change() from running on page load
<p>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:</p>

<p><strong>JS/jQuery</strong></p>

<pre><code>$(document).ready(function() {
  $("select").change(function () {
    var txt = $(this).val();
    $(this).next('span').text(txt);
  }).trigger('change');
});
</code></pre>

<p><strong>HTML (repeated many times)</strong></p>

<pre><code>&lt;select name="animal[]"&gt;
&lt;option value="dog" selected="selected"&gt;dog&lt;/option&gt;
&lt;option value="cat"&gt;cat&lt;/option&gt;
&lt;option value="bird"&gt;bird&lt;/option&gt;
&lt;option value="snake"&gt;snake&lt;/option&gt;
&lt;/select&gt;
&lt;span class="out"&gt;text that shouldn't be replaced until user changes selected item&lt;/span&gt;
</code></pre>

<p>Thanks for your help!</p>
