JSFiddle - React, Tailwind, and code Playground

by hmdadou

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">
        </select>
        
        <div class="city">
        </div>
        </div>

JavaScript

$(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
$("#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;
           }
});

jq81("#child_selection").change(function(){
$('.city').text($(this).val());
});	
//function to populate child select box
function list(array_list)
{
    jq81("#child_selection").html(""); //reset child options
    jq81(array_list).each(function...