<p>Help! I am using jQuery to make an AJAX call to fill in a drop-down dynamically given the user's previous input (from another drop-down, that is filled server-side). In all other browsers aside from Firefox (IE6/7, Opera, Safari), my append call actually appends the information below my existing option - "Select An ". But in Firefox, it automatically selects the last item given to the select control, regardless of whether I specify the JQuery action to .append or to replace (.html()). </p>

<pre><code>&lt;select name="Products" id="Products" onchange="getHeadings(this.value);"&gt;
  &lt;option value=""&gt;Select Product&lt;/option&gt;
&lt;/select&gt;    

function getProducts(Category) {
  $.ajax({
    type: "GET",
    url: "getInfo.cfm",
    data: "Action=getProducts&amp;Category=" + Category,
    success: function(result){
      $("#Products").html(result);
    }
  });
};
</code></pre>

<p>Any thoughts? I have tried in the past to also transmit another blank first option, and then trigger a JavaScript option to re-select the first index, but this triggers the onChange event in my code, rather annoying for the user.</p>

<hr>

<p>Update:</p>

<p>Here's an example of what the script would return</p>

<pre><code>&lt;option value="3"&gt;Option 1&lt;/option&gt;
&lt;option value="4"&gt;Option 2&lt;/option&gt;
&lt;option value="6"&gt;Option 3&lt;/option&gt;
</code></pre>

<p>Optionally, if using the .html() method instead of the .append(), I would put another</p>

<pre><code>&lt;option value=""&gt;Select a Product&lt;/option&gt;
</code></pre>

<p>at the top of the result.</p>

<hr>

<p>@Darryl Hein</p>

<p>Here's an example of what the script would return</p>

<pre><code>&lt;option value="3"&gt;Option 1&lt;/option&gt;
&lt;option value="4"&gt;Option 2&lt;/option&gt;
&lt;option value="6"&gt;Option 3&lt;/option&gt;
</code></pre>

<p>Optionally, if using the .html() method instead of the .append(), I would put another</p>

<pre><code>&lt;option value=""&gt;Select a Product&lt;/option&gt;
</code></pre>

<p>at the top of the result.</p>

[{'answer_id': 57514, 'author': 'Darryl Hein', 'author_id': 5441, 'author_profile': 'https://Stackoverflow.com/users/5441', 'pm_score': 0, 'selected': False, 'text': '<p>I just did the following and it worked fine:</p>\n\n<pre><code>&lt;select name="Products" id="Products"&gt;\n&lt;option value=""&gt;Select Product&lt;/option&gt;\n&lt;/select&gt;\n\n&lt;script type="text/javascript"&gt;\n$(\'#Products\').append(\'&lt;option value="1"&gt;test 1&lt;/option&gt;&lt;option value="3"&gt;test 3&lt;/option&gt;&lt;option value="3"&gt;test 3&lt;/option&gt;\');\n&lt;/script&gt;\n</code></pre>\n\n<p>What is your script returning?</p>\n'}, {'answer_id': 57905, 'author': 'Prestaul', 'author_id': 5628, 'author_profile': 'https://Stackoverflow.com/users/5628', 'pm_score': 3, 'selected': True, 'text': '<p>Can you just change your success function to reset the selected item to the first option?</p>\n\n<pre><code>$("#Products").append(result).selectedIndex = 0;\n</code></pre>\n\n<p>or to set it to the previous selection?</p>\n\n<pre><code>var tmpIdx = $("#Products").selectedIndex;\n$("#Products").append(result).selectedIndex = tmpIdx;\n</code></pre>\n\n<p>If the onChange event should not fire then you can always set a flag to indicate that the form is updating and change events can check for that flag and exit if it is set.</p>\n'}, {'answer_id': 490513, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 0, 'selected': False, 'text': "<pre><code>$('#field').find('option:first').attr('selected', 'selected').parent('select');\n</code></pre>\n\n<p>see this will work</p>\n"}]
['https://Stackoverflow.com/questions/57479', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/5405/']