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()).

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

function getProducts(Category)
      type: "GET",
      url: "getInfo.cfm",
      data: "Action=getProducts&Category=" + Category,
      success: function(result){

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.


How about sending the "Select An ..." option last?

Joseph Bui

I just did the following and it worked fine:

<select name="Products" id="Products">
<option value="">Select Product</option>

<script type="text/javascript">
$('#Products').append('<option value="1">test 1</option><option value="3">test 3</option><option value="3">test 3</option>');

What is your script returning?

Darryl Hein

@Darryl Hein

Here's an example of what the script would return

<option value="3">AAG Pressure Gage</option>
<option value="4">ADPS Pressure Switch</option>
<option value="6">Series DA/DS Pressure Switch</option>

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

<option value="">Select a Product</option>

at the top of the result.

Michael Runyon
+1  A: 

Can you just change your success function to reset the selected item to the first option?

$("#Products").append(result).selectedIndex = 0;

or to set it to the previous selection?

var tmpIdx = $("#Products").selectedIndex;
$("#Products").append(result).selectedIndex = tmpIdx;

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.



Yes, you can reset the selectedIndex after the successful import from the ajax call. But I can't figure out the jQuery call to do so.

document.getElementById('Products').selectedIndex = 0;

Pure javascript appears to be the only way to accomplish this at the moment.Perhaps there might be a way with .attr()?

Michael Runyon
I think that you can use .val(0) in place of .selectedIndex = 0
This does work - $("#Products").val(0);

$('#field').find('option:first').attr('selected', 'selected').parent('select'); see this will work


i also have a problem with that Jquery. In Internet Explorer everyting is just fine, but Firefox always select the last . How can i change that?