Javascript JSFIDLE无法在我的页面上工作
我得到了一个JSFIDLE并试图让它在我的web表单上工作,但它不是woorking。谁能告诉我我犯了什么错误。JSFIDDLE工作得非常好,但我无法让它仅在我的页面上工作。这是小提琴的链接: 这就是我试图使用它的方式:Javascript JSFIDLE无法在我的页面上工作,javascript,jquery,Javascript,Jquery,我得到了一个JSFIDLE并试图让它在我的web表单上工作,但它不是woorking。谁能告诉我我犯了什么错误。JSFIDDLE工作得非常好,但我无法让它仅在我的页面上工作。这是小提琴的链接: 这就是我试图使用它的方式: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Un
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
var devices = ['computer', 'router']
var device_types = {
'computer': ['laptop', 'desktop'],
'router': ['wireless', 'bluetooth']
}
var brands = {
'laptop': ['HP', 'DELL'],
'desktop': ['Apple', 'MAC'],
'wireless':['Foo','Bar'],
'bluetooth':['Grren','Blue']
}
function createOptions(arr) {
var html = ['<option >--select--</option>'];
$.each(arr, function(i, item) {
html.push('<option value="' + item + '">' + item + '</option>')
});
return html.join('');
}
var mainOptions = createOptions(devices)
$(function() {
$("input[type=button][value=Add]").click(function(e) {
for (i = 0; i < document.getElementById('sel').value; i++) {
e.preventDefault();
var j = 1;
var newDiv = $('<div class="row">').appendTo("#dropbox");
$("<select class='devices has_dependents'>").attr("name", "input1_" + j).append(mainOptions).appendTo(newDiv)
$("<select class='device_types has_dependents'>").attr("name", "input2_" + j).appendTo(newDiv)
$("<select class='brands'>").attr("name", "input3_" + j).appendTo(newDiv)
$("<input>").attr("name", "input4_" + j).appendTo(newDiv);
$("<button>").text("Remove").appendTo(newDiv).click(function(e) {
e.preventDefault();
$(this).parent().remove();
})
j++;
}
});
$(document).on('change', 'select.has_dependents', function() {
var val = $(this).val(),
option_obj;
if ($(this).is('.devices')) {
option_obj = device_types;
} else {
option_obj = brands;
}
var options = createOptions( option_obj[val]);
$(this).next().html(options)
})
})
</script>
</head>
<body>
<form>
<select id="sel">
<option value="" selected="selected"></option>
<option value="01" >01</option>
<option value="02" >02</option>
<option value="03" >03</option>
<option value="04" >04</option>
<option value="05" >05</option>
<option value="06" >06</option>
<option value="07" >07</option>
<option value="08" >08</option>
<option value="09" >09</option>
<option value="10" >10</option>
<option value="11" >11</option>
<option value="12" >12</option>
<option value="13" >13</option>
<option value="14" >14</option>
<option value="15" >15</option>
</select>
<input type="button" value="Add" />
<div id="dropbox"></div>
</form>
</body>
</html>
第67行在字符后面有一个非可视字符
})<right here is a none visual character>
</script>
编辑:
下面是固定代码的链接:
从JSFIDLE中剪切和粘贴得到了一个非法字符,出于某种原因,JSFIDLE将零宽度空格字符放置在其中。它在vim中显示为第67行的结束部分。问题可能在javascript中的某个地方。。您应该看看javascript控制台。如果在本地测试,您的浏览器是否禁用了javascript?如果您碰巧在IE中测试,它可能会阻止脚本,直到您解除警告。。。问题中提到了我页面的代码,而链接到JSFIDLE的是:我的观点是,由于它在小提琴中工作,这对我们帮助不了你。如果你可以链接到不起作用的页面,那会更有帮助。我需要做什么来修复它呢?只需删除整个第67行并重新键入:如果你将光标放在}之后,按delete直到第67行看起来像},然后按,它应该work@Harsh你不是碰巧抄了这句话,删除并复制它以保存键入的内容,是吗?我也这样做了,但没有。另外,我查看了页面源代码,在}和第66行之间有一个空格,所以我删除了该空格,方法与您要求的第67行相同,但仍然没有解决方法?相信我,这对我来说是一门火箭科学。我对HTML知之甚少,对PHP知之甚少,对Java一无所知。你可以按照@user156230的建议去做,也可以复制并粘贴你的问题中的整个代码块,并用它替换文件中的代码块。