Раскрывающиеся списки AJAX (HTML Select) в Firefox с помощью jQuery

Question

Помощь! Я использую jQuery для вызова AJAX, чтобы динамически заполнить раскрывающийся список с учетом предыдущего ввода пользователя (из другого раскрывающегося списка, который заполнен на стороне сервера). Во всех других браузерах, кроме Firefox (IE6 / 7, Opera, Safari), мой вызов добавления действительно добавляет информацию под моей существующей опцией - «Выбрать ан». Но в Firefox он автоматически выбирает последний элемент, данный элементу управления select, независимо от того, указываю ли я действие JQuery для .append или для замены (.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);
    }
  });
};

Есть мысли? В прошлом я также пытался передать еще одну пустую первую опцию, а затем активировать опцию JavaScript для повторного выбора первого индекса, но это вызывает событие onChange в моем коде, что довольно раздражает пользователя.

---

Обновление:

Вот пример того, что скрипт вернул бы

<option value="3">Option 1</option>
<option value="4">Option 2</option>
<option value="6">Option 3</option>

При желании, если использовать метод .html () вместо .append (), я бы поставил другой

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

вверху результата.

---

@ Дэррил Хейн

Вот пример того, что скрипт вернет

<option value="3">Option 1</option>
<option value="4">Option 2</option>
<option value="6">Option 3</option>

При желании, если использовать метод .html () вместо .append (), я бы поставил другой

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

вверху результата.

Answer 1

Можете ли вы просто изменить функцию успеха, чтобы сбросить выбранный элемент до первой опции?

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

или установить предыдущий выбор?

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

Если событие onChange не должно запускаться, вы всегда можете установить флаг, чтобы указать, что форма обновляется, а события изменения могут проверить этот флаг и выйти, если он установлен.

Answer 2

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

посмотри, это будет работать

Answer 3

Я просто сделал следующее и все заработало:

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

Что возвращает ваш скрипт?