我不知道为什么,但我有一段代码在我的系统上工作,但不能在WAMP或共享服务器上工作。
下面是我的代码:-<html>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
(function($) {
$.ajax({
url:"select2.json",
type:"GET",
dataType:"json",
success:function(data){
var selectedDepartment, selectedSubproj;
$.fn.changeType = function() {
var options_projname = '<option>Select<'/option>';
$.each(data, function(i, d) {
options_projname += '<option value="' + d.projname + '">' + d.projname + '<'/option>';
});
$("select#projname", this).html(options_projname);
$("select#projname").change(function() {
var index = $(this).get(0).selectedIndex;
var d = data[index - 1]; // -1 because index 0 is for empty 'Select' option
selectedDepartment = d;
var options = '';
if (index > 0) {
options += '<option>Select<'/option>';
$.each(d.subproj, function(i, j) {
options += '<option value="' + j.title + '">' + j.title + '<'/option>';
});
} else {
options += '<option>Select<'/option>';
}
$("select#subproj").html(options);
});
$("select#subproj").change(function() {
var index = $(this).get(0).selectedIndex;
selectedSubproj = selectedDepartment.subproj[index -1];
var options = '';
if (index > 0) {
$.each(selectedSubproj.unit, function(i, b) {
//options += '<option value="' + b.name + '">' + b.name + '<'/option>';
options += '<input type="checkbox" name="' + b.name + '" value="' + b.name + '">' + b.name + '<br/>';
});
} else {
options += '<option>Select<'/option>';
}
$("#unit").html(options);
});
};
}
});
})(jQuery);
$(document).ready(function() {
$("form#search").changeType();
});
</script>
<form id="search" action="" name="search">
<select name="projname" id="projname">
<option>Select</option>
</select>
<select name="subproj" id="subproj">
<option>Select</option>
</select>
<div name="unit" id="unit">
</div>
</form>
</body>
</html>
当我在WAMP或共享服务器上运行时,我得到以下错误。http://s8.postimg.org/vj19w76v9/error.png但是如果我在我的pc上像运行一个普通的html文件一样运行它就可以了。我的JSON也渲染得很好,所以我知道它没有问题。
我试着清理缓存和所有的好东西,但它吃了我的大脑…
如果有人能帮忙我将很高兴。
提前感谢……欢呼声…
问题是您在ajax调用的success
回调中定义了您的changeType
插件。因此,当文档准备好时,当您调用该插件时,它将是未定义的。您需要首先定义插件,并考虑通过参数从ajax调用获得的data
变量的方法。我相信像这样粗略的代码应该可以工作:
(function ($) {
$.fn.changeType = function (data) {
var selectedDepartment, selectedSubproj;
var options_projname = '<option>Select<'/option>';
$.each(data, function (i, d) {
options_projname += '<option value="' + d.projname + '">' + d.projname + '<'/option>';
});
$("select#projname", this).html(options_projname);
$("select#projname").change(function () {
var index = $(this).get(0).selectedIndex;
var d = data[index - 1]; // -1 because index 0 is for empty 'Select' option
selectedDepartment = d;
var options = '';
if (index > 0) {
options += '<option>Select<'/option>';
$.each(d.subproj, function (i, j) {
options += '<option value="' + j.title + '">' + j.title + '<'/option>';
});
} else {
options += '<option>Select<'/option>';
}
$("select#subproj").html(options);
});
$("select#subproj").change(function () {
var index = $(this).get(0).selectedIndex;
selectedSubproj = selectedDepartment.subproj[index - 1];
var options = '';
if (index > 0) {
$.each(selectedSubproj.unit, function (i, b) {
//options += '<option value="' + b.name + '">' + b.name + '<'/option>';
options += '<input type="checkbox" name="' + b.name + '" value="' + b.name + '">' + b.name + '<br/>';
});
} else {
options += '<option>Select<'/option>';
}
$("#unit").html(options);
});
};
})(jQuery);
$(document).ready(function () {
$.ajax({
url: "select2.json",
type: "GET",
dataType: "json",
success: function (data) {
$("form#search").changeType(data);
}
});
});