AJAX Dropdowns (HTML Select) in Firefox with JQuery

Question

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>
</select>    

function getProducts(Category)
 {
  $.ajax({
      type: "GET",
      url: "getInfo.cfm",
      data: "Action=getProducts&Category=" + Category,
      success: function(result){
        $("#Products").html(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.

Answer 1

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

Answer 2

I just did the following and it worked fine:

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

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

What is your script returning?

Answer 3

@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.

Answer 4

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.

Answer 5

@Prestaul

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

Answer 6

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

Answer 7

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?