当我尝试使用数组推送将选择选项加载到 optStored 数组时,数组始终保持为空。在chrome,firefox和safari中,代码工作正常但不在Internet Explorer中。有没有解决这个问题或者没有办法解决这个问题?
更新于2016年11月10日上午2:12:对代码进行了一些更改,之前的代码已注释掉,但数组仍然为空!有解决方案吗?
// array to store select options
var optStored = [];
// filter select
function filterFruits(el) {
var value = el.value.toLowerCase();
var form = el.form;
var opt, sel = form.fruits;
if (value == "") {
restoreOpts();
} else {
for (var i = sel.options.length - 1; i >= 0; i--) {
opt = sel.options[i];
if (opt.text.toLowerCase().indexOf(value) == -1) {
sel.removeChild(opt);
}
}
}
}
// Restore select options
function restoreOpts() {
var sel = document.getElementById('fruits');
sel.options.length = 0;
for (var i = 0, iLen = optStored.length; i < iLen; i++) {
// Recent Update 2:12am 10/11/16:
// Found aworkaround for restoring the select options
// This method works with versions of IE4+
sel.options[sel.options.length] = new Option(optStored[i].text, optStored[i].value, false, false);
// Recent Comment Update 2:12am 10/11/16:
// Console complains of a type mismatch error
// sel.add(optStored[i], null);
}
}
// Load select options
window.onload = function() {
var sel = document.getElementById('fruits');
for (var i = 0, iLen = sel.options.length; i < iLen; i++) {
// Recent Comment Update 2:12am 10/11/16:
// tried this method as well but no luck.
// it was also mentioned in the comments below
// the array still remains empty!
optStored[i] = sel.options[i];
//optStored.push(sel.options[i]);
}
};
<form>
<input type="text" onkeyup="filterFruits(this);" placeholder="Filter">
<select id="fruits">
<option value="1">Apple</option>
<option value="2">Orange</option>
<option value="3">Cherry</option>
<option value="4">Banana</option>
</select>
</form>
答案 0 :(得分:3)
根据https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push#Browser_compatibility,IE仅支持版本5.5的push
方法。请尝试以下方法:
window.onload = function() {
var sel = document.getElementById('fruits');
for (var i = 0, iLen = sel.options.length; i < iLen; i++) {
optStored[i] = sel.options[i];
}
};
答案 1 :(得分:1)
如果您按F12,它是否在控制台中出现任何错误? IE控制台远不及Chrome / Firefox开发人员工具,但它应该显示任何错误。
我想知道将using System.Web.Script.Serialization;
namespace DemoWebForm
{
public partial class Default : System.Web.UI.Page
{
[System.Web.Services.WebMethod]
public static string PostJson(string firstName, string lastName)
{
return new JavaScriptSerializer().Serialize(
"Hello, " + lastName + ", " + firstName + "!");
}
}
}
作为第二个参数传递给<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DemoWebForm.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body ng-app="demoApp">
<form id="form1" runat="server" ng-controller="DemoController">
<pre>{{user}}</pre>
<button type="button" onclick="ajaxPostData();">Post Data Ajax</button>
<button type="button" ng-click="ngPostData()">Post Data Angular</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript">
function ajaxPostData() {
var user = { firstName: "John", lastName: "Doe" };
$.ajax({
type: "POST",
url: '<%= ResolveUrl("~/default.aspx/postjson") %>',
data: JSON.stringify(user),
contentType: "application/json",
success: function (msg) {
console.log(msg.d);
}
});
}
var demoApp = angular.module('demoApp', [])
.controller('DemoController', function DemoController($scope, $http) {
$scope.user = { "firstName": "John", "lastName": "Doe" };
$scope.ngPostData = function () {
$http.post('<%= ResolveUrl("~/default.aspx/postjson") %>', $scope.user)
.then(function (result) {
console.log(result.data.d);
});
}
});
</script>
</form>
</body>
</html>
方法,根据文档应该undefined
将新选项附加到列表的末尾< / p>
before是可选的,并且应该在之前插入表示项目项的集合的元素或类型为long的索引。如果此参数为null(或索引不存在),则新元素将附加到集合的末尾。
https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/add