Firefox 中使用 jQuery 的 AJAX 下拉菜单(HTML Select)
-
09-06-2019 - |
题
帮助!我正在使用 jQuery 进行 AJAX 调用,根据用户之前的输入动态填充下拉列表(来自另一个下拉列表,在服务器端填充)。在除 Firefox(IE6/7、Opera、Safari)之外的所有其他浏览器中,我的追加调用实际上会在我现有的选项“选择一个”下方附加信息。但在 Firefox 中,它会自动选择提供给选择控件的最后一项,无论我是否将 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>
在结果的顶部。
解决方案
您可以更改成功函数以将所选项目重置为第一个选项吗?
$("#Products").append(result).selectedIndex = 0;
或者将其设置为之前的选择?
var tmpIdx = $("#Products").selectedIndex;
$("#Products").append(result).selectedIndex = tmpIdx;
如果 onChange 事件不应触发,那么您始终可以设置一个标志来指示表单正在更新,并且更改事件可以检查该标志并在设置后退出。
其他提示
我刚刚做了以下操作并且效果很好:
<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>
你的脚本返回什么?
$('#field').find('option:first').attr('selected', 'selected').parent('select');
看看这行得通
不隶属于 StackOverflow