chluther/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Select Test</title>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div class="reformed-form">
	<form method="post" name="testform" id="testform" action="reformed/formmail/formmail.php">
		<dl>
			<dt>
				<label for="Select1">Select1</label>
			</dt>
			<dd>
				<select size="1" name="select1" id="select1">
					<option value="1">Select One</option>
				</select>
			</dd>
		</dl>
		<dl>
			<dt>
				<label for="select2">Select 2</label>
			</dt>
			<dd>
				<select size="1" name="select2" id="select2">
					<option value="1">Select One</option>
				</select>
			</dd>
		</dl>
		<div id="submit_buttons">
			<button type="submit">Submit</button>
		</div>
		</form>
</div>

</head>
<body>

<script id="jsbin-javascript">
var professionsx = [
    "Select One",
    "Doctor",
    "Nurse",
    "Pharmacist"
    ];

var specialties = {
    'Select One': [
        "Select One"
    ],
    'Doctor': [
        "General",
        "Infectious Disease",
        "Surgery",
        "Oncology"
    ],
    'Nurse': [
        "Option 1",
        "Option 2"
    ],
    'Pharmacist': [
        "None"
      ]
    };


x = $( "select#select1" ).val();
console.log('x = ' + x);


function populateDependant (select1id, select2id, select2array, disabledarray = [] ) {
        var s1 = $('select#'+select1id).val(), s2 = $('select#'+select2id).val();
        $('select#'+select2id).empty();
        $.each(select2array[s1] || ["populateDependant Error"], function(_, t) {
            if(t == s2) {
             $('select#'+select2id).append('<option selected>' + t + '</option>');
            }
            else {
              $('select#'+select2id).append('<option>' + t + '</option>');
            }
        });
  };

function populateSelect (select1id, select1array, disabledarray = []) {
        var s1 = $("select#"+ select1id).val();
        $("select#"+ select1id).empty();
        $.each(select1array || ["populateSelect Error"], function(_, t) {
            if(t == s1) {
              $("select#"+ select1id).append('<option selected>' + t + '</option>');
            }
            else {
              $("select#"+ select1id).append('<option>' + t + '</option>');
            }
        });
   };


var professions = Object.keys(specialties) ;

populateSelect('select1', professions);

$("select#select1").change( function() {
	populateDependant('select1', 'select2', specialties);
});
</script>


<script id="jsbin-source-javascript" type="text/javascript">var professionsx = [
    "Select One",
    "Doctor",
    "Nurse",
    "Pharmacist"
    ];

var specialties = {
    'Select One': [
        "Select One"
    ],
    'Doctor': [
        "General",
        "Infectious Disease",
        "Surgery",
        "Oncology"
    ],
    'Nurse': [
        "Option 1",
        "Option 2"
    ],
    'Pharmacist': [
        "None"
      ]
    };


x = $( "select#select1" ).val();
console.log('x = ' + x);


function populateDependant (select1id, select2id, select2array, disabledarray = [] ) {
        var s1 = $('select#'+select1id).val(), s2 = $('select#'+select2id).val();
        $('select#'+select2id).empty();
        $.each(select2array[s1] || ["populateDependant Error"], function(_, t) {
            if(t == s2) {
             $('select#'+select2id).append('<option selected>' + t + '</option>');
            }
            else {
              $('select#'+select2id).append('<option>' + t + '</option>');
            }
        });
  };

function populateSelect (select1id, select1array, disabledarray = []) {
        var s1 = $("select#"+ select1id).val();
        $("select#"+ select1id).empty();
        $.each(select1array || ["populateSelect Error"], function(_, t) {
            if(t == s1) {
              $("select#"+ select1id).append('<option selected>' + t + '</option>');
            }
            else {
              $("select#"+ select1id).append('<option>' + t + '</option>');
            }
        });
   };


var professions = Object.keys(specialties) ;

populateSelect('select1', professions);

$("select#select1").change( function() {
	populateDependant('select1', 'select2', specialties);
});

</script></body>
</html>

## jsbin.juqizededi.js
var professionsx = [
    "Select One",
    "Doctor",
    "Nurse",
    "Pharmacist"
    ];

var specialties = {
    'Select One': [
        "Select One"
    ],
    'Doctor': [
        "General",
        "Infectious Disease",
        "Surgery",
        "Oncology"
    ],
    'Nurse': [
        "Option 1",
        "Option 2"
    ],
    'Pharmacist': [
        "None"
      ]
    };


x = $( "select#select1" ).val();
console.log('x = ' + x);


function populateDependant (select1id, select2id, select2array, disabledarray = [] ) {
        var s1 = $('select#'+select1id).val(), s2 = $('select#'+select2id).val();
        $('select#'+select2id).empty();
        $.each(select2array[s1] || ["populateDependant Error"], function(_, t) {
            if(t == s2) {
             $('select#'+select2id).append('<option selected>' + t + '</option>');
            }
            else {
              $('select#'+select2id).append('<option>' + t + '</option>');
            }
        });
  };

function populateSelect (select1id, select1array, disabledarray = []) {
        var s1 = $("select#"+ select1id).val();
        $("select#"+ select1id).empty();
        $.each(select1array || ["populateSelect Error"], function(_, t) {
            if(t == s1) {
              $("select#"+ select1id).append('<option selected>' + t + '</option>');
            }
            else {
              $("select#"+ select1id).append('<option>' + t + '</option>');
            }
        });
   };


var professions = Object.keys(specialties) ;

populateSelect('select1', professions);

$("select#select1").change( function() {
	populateDependant('select1', 'select2', specialties);
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Select Test</title>

	<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
	<div class="reformed-form">
	<form method="post" name="testform" id="testform" action="reformed/formmail/formmail.php">
	<dl>
	<dt>
	<label for="Select1">Select1</label>
	</dt>
	<dd>
	<select size="1" name="select1" id="select1">
	<option value="1">Select One</option>
	</select>
	</dd>
	</dl>
	<dl>
	<dt>
	<label for="select2">Select 2</label>
	</dt>
	<dd>
	<select size="1" name="select2" id="select2">
	<option value="1">Select One</option>
	</select>
	</dd>
	</dl>
	<div id="submit_buttons">
	<button type="submit">Submit</button>
	</div>
	</form>
	</div>

	</head>
	<body>

	<script id="jsbin-javascript">
	var professionsx = [
	"Select One",
	"Doctor",
	"Nurse",
	"Pharmacist"
	];

	var specialties = {
	'Select One': [
	"Select One"
	],
	'Doctor': [
	"General",
	"Infectious Disease",
	"Surgery",
	"Oncology"
	],
	'Nurse': [
	"Option 1",
	"Option 2"
	],
	'Pharmacist': [
	"None"
	]
	};


	x = $( "select#select1" ).val();
	console.log('x = ' + x);


	function populateDependant (select1id, select2id, select2array, disabledarray = [] ) {
	var s1 = $('select#'+select1id).val(), s2 = $('select#'+select2id).val();
	$('select#'+select2id).empty();
	$.each(select2array[s1] \|\| ["populateDependant Error"], function(_, t) {
	if(t == s2) {
	$('select#'+select2id).append('<option selected>' + t + '</option>');
	}
	else {
	$('select#'+select2id).append('<option>' + t + '</option>');
	}
	});
	};

	function populateSelect (select1id, select1array, disabledarray = []) {
	var s1 = $("select#"+ select1id).val();
	$("select#"+ select1id).empty();
	$.each(select1array \|\| ["populateSelect Error"], function(_, t) {
	if(t == s1) {
	$("select#"+ select1id).append('<option selected>' + t + '</option>');
	}
	else {
	$("select#"+ select1id).append('<option>' + t + '</option>');
	}
	});
	};


	var professions = Object.keys(specialties) ;

	populateSelect('select1', professions);

	$("select#select1").change( function() {
	populateDependant('select1', 'select2', specialties);
	});
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">var professionsx = [
	"Select One",
	"Doctor",
	"Nurse",
	"Pharmacist"
	];

	var specialties = {
	'Select One': [
	"Select One"
	],
	'Doctor': [
	"General",
	"Infectious Disease",
	"Surgery",
	"Oncology"
	],
	'Nurse': [
	"Option 1",
	"Option 2"
	],
	'Pharmacist': [
	"None"
	]
	};


	x = $( "select#select1" ).val();
	console.log('x = ' + x);


	function populateDependant (select1id, select2id, select2array, disabledarray = [] ) {
	var s1 = $('select#'+select1id).val(), s2 = $('select#'+select2id).val();
	$('select#'+select2id).empty();
	$.each(select2array[s1] \|\| ["populateDependant Error"], function(_, t) {
	if(t == s2) {
	$('select#'+select2id).append('<option selected>' + t + '</option>');
	}
	else {
	$('select#'+select2id).append('<option>' + t + '</option>');
	}
	});
	};

	function populateSelect (select1id, select1array, disabledarray = []) {
	var s1 = $("select#"+ select1id).val();
	$("select#"+ select1id).empty();
	$.each(select1array \|\| ["populateSelect Error"], function(_, t) {
	if(t == s1) {
	$("select#"+ select1id).append('<option selected>' + t + '</option>');
	}
	else {
	$("select#"+ select1id).append('<option>' + t + '</option>');
	}
	});
	};


	var professions = Object.keys(specialties) ;

	populateSelect('select1', professions);

	$("select#select1").change( function() {
	populateDependant('select1', 'select2', specialties);
	});

	</script></body>
	</html>