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>

位于结果的顶部。

@Darryl Hein

以下是脚本将返回的示例

<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

我刚刚做了以下工作并且工作正常：

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

你的剧本回归了什么？

Answer 3

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

看到这会起作用

使用jQuery在Firefox中的AJAX下拉列表（HTML Select）

3 个答案: