如果我从这里复制代码：https://jsfiddle.net/agt10exp/
它在fiddle上工作得很好，但是当我在我的pc上创建一个新文件并将代码粘贴到其中时，我得到了相同的布局，但是它没有正常工作（将<html></html>和<script src....></script>添加到我的代码中：（P.s我是一个Python程序员，所以可能问题在于我的HTML/Js知识）
<html>
I am a </span><select name="parent_selection" id="parent_selection">
<option value="">-- Please Select --</option>
<option value="patient">Patient</option>
<option value="doctor">Doctor or physician</option>
<option value="school">School or parent</option>
<option value="worker">Case worker</option>
</select>
<br /><span>and I need information on</span>
<select name="child_selection" id="child_selection" onchange="location = this.options[this.selectedIndex].value;">
</select>
</html>
<!------answer 1: not wokring --------------->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
var jq81 = jQuery.noConflict();
jq81(document).ready(function($){
//let's create arrays
var patient = [
{display: "My initial visit", value: "patients#visit" },
{display: "My initial evaluation", value: "patients#visit" },
{display: "My appointments", value: "patients#appointments" },
{display: "Your payment policies", value: "patients#policies" }];
var doctor = [
{display: "Our approach", value: "doctors-and-physicians" },
{display: "Our services", value: "services" },
{display: "Referring patients", value: "patients#visit" }];
var school = [
{display: "Our approach", value: "schools-and-parents" },
{display: "My child's initial evaluation", value: "patients#visit" },
{display: "Setting appointments", value: "patients#appointments" },
{display: "Your payment policies", value: "patients#policies" }];
var worker = [
{display: "Our approach", value: "case-workers" },
{display: "Insurance policies", value: "clients#insurance" },
{display: "Your Payment policies", value: "patients#policies" }];
//If parent option is changed
jq81("#parent_selection").change(function() {
var parent = jq81(this).val(); //get option value from parent
switch(parent){ //using switch compare selected option and populate child
case 'patient':
list(patient);
break;
case 'doctor':
list(doctor);
break;
case 'school':
list(school);
break;
case 'worker':
list(worker);
break;
default: //default child option is blank
jq81("#child_selection").html('');
break;
}
});
//function to populate child select box
function list(array_list)
{
jq81("#child_selection").html(""); //reset child options
jq81(array_list).each(function (i) { //populate child options
jq81("#child_selection").append("<option value=\""+array_list[i].value+"\">"+array_list[i].display+"</option>");
});
}
});
</script>
我看到更多有同样问题的人：
Code is Working on Fiddle but not on Website
JSFiddle code not working in my own page
javascript code working in jsfiddle but not working in the browser
不过，我试过解决办法，但我想不通，我希望有人能帮我
最佳答案
您声明自定义脚本加上add jquery，但它们必须是独立的：
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
+注释jquery src url
编辑：
这个代码在我的chrome中运行良好
<html>
I am a </span><select name="parent_selection" id="parent_selection">
<option value="">-- Please Select --</option>
<option value="patient">Patient</option>
<option value="doctor">Doctor or physician</option>
<option value="school">School or parent</option>
<option value="worker">Case worker</option>
</select>
<br /><span>and I need information on</span>
<select name="child_selection" id="child_selection" onchange="location = this.options[this.selectedIndex].value;">
</select>
</html>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
var jq81 = jQuery.noConflict();
jq81(document).ready(function($){
//let's create arrays
var patient = [
{display: "My initial visit", value: "patients#visit" },
{display: "My initial evaluation", value: "patients#visit" },
{display: "My appointments", value: "patients#appointments" },
{display: "Your payment policies", value: "patients#policies" }];
var doctor = [
{display: "Our approach", value: "doctors-and-physicians" },
{display: "Our services", value: "services" },
{display: "Referring patients", value: "patients#visit" }];
var school = [
{display: "Our approach", value: "schools-and-parents" },
{display: "My child's initial evaluation", value: "patients#visit" },
{display: "Setting appointments", value: "patients#appointments" },
{display: "Your payment policies", value: "patients#policies" }];
var worker = [
{display: "Our approach", value: "case-workers" },
{display: "Insurance policies", value: "clients#insurance" },
{display: "Your Payment policies", value: "patients#policies" }];
//If parent option is changed
jq81("#parent_selection").change(function() {
var parent = jq81(this).val(); //get option value from parent
switch(parent){ //using switch compare selected option and populate child
case 'patient':
list(patient);
break;
case 'doctor':
list(doctor);
break;
case 'school':
list(school);
break;
case 'worker':
list(worker);
break;
default: //default child option is blank
jq81("#child_selection").html('');
break;
}
});
//function to populate child select box
function list(array_list)
{
jq81("#child_selection").html(""); //reset child options
jq81(array_list).each(function (i) { //populate child options
jq81("#child_selection").append("<option value=\""+array_list[i].value+"\">"+array_list[i].display+"</option>");
});
}
});
</script>