Fiddle script not working on website

Question

If I copy the code from here: https://jsfiddle.net/agt10exp/
It's working fine on fiddle, however when I make a new file on my pc and just paste the code in it, I get the same layout, however it's not functioning properly (added the <html></html> and <script src....></script> to my code:
(P.s I'm a Python programmer so maybe the problem is my HTML/Js knowledge)

<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>

I saw more people who had the same problem:

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

however, I tried the solutions but I couldn't figure it out, I hope someone can help me out

You cannot have a `` you need to use separate ` – Patrick Evans May 21 '16 at 19:00 — Patrick Evans, May 21 '16 at 19:00

Denis Yakovlev · Accepted Answer · 2016-05-21T19:25:20.237

You declare custom script plus add jquery, but they must be separate:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>

+ note jquery src url

EDIT: this code works fine in my 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>

I already tried that one, but it is'n't working thanks anyway — KingBoomie, May 21 '16 at 19:18
woww awesome! I have been trying this for hours thank you so much — KingBoomie, May 21 '16 at 19:29
One more question do you know why after selecting the second drop down menu it shows an error, I can't find a reference to a page in the code. I want to use POST to send the data over to another page, can you help me? @yakovlev Denis — KingBoomie, May 21 '16 at 20:04
First you need to create a function like for parent_selection: jq81("#child_selection").change(function() { var child = jq81(this).val(); //get option value from child. And then make any AJAX requests, but if you open this html from filesystem check it works correct with https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS — Denis Yakovlev, May 21 '16 at 20:17
https://www.google.nl/?parent_selection=Sequention&child_selection=index2%23Seqtitel&gws_rd=ssl I got this, but I don't know if It's Always like this @Yakolev Denis — KingBoomie, May 21 '16 at 20:20
thankyou removing the onchange function fixed it! @Yakovlev Denis — KingBoomie, May 22 '16 at 07:53

Fiddle script not working on website

1 Answers1