htmlのプルダウンメニューを選択する度に第二プルダウンの値を動的に変更させたい

type1のプルダウンを選択したらonclickを使用して?(ほかのイベントがありましたら教えてください)
動的にmysqlのtype1で選択した値と一致するレコードのみtype2から取得して
type2のプルダウンに動的に表示させたい

簡単に言うとtype1で選択した値によってtype2での表示する値や数を変更したいです
値はtype1,2どちらもmysqlからphp経由で取得

下記mysqlのカラム構造

またプルダウンの数や表示する値は
まずPHPを使用してMysqlに登録してあるデーターを変数へ取得後

よろしくお願いいたしますm..

下記全コード

php
1    <select name="type1" id="type1">
2      <option value="0" onClick="clickType1(type1)">選択してください</option>
3    </select>
4
5     <br>
6
7     <select name="type2" id="type2">
8      <option value="0" >選択してください</option>
9     </select>
10
11
12
13<?php
14
15ini_set('display_errors', "On");
16
17$stmt = $dbh->prepare('SELECT type1 FROM type WHERE id=?');
18$stmt->bindValue(1,$id,PDO::PARAM_INT);
19$stmt->execute();
20
21foreach($stmt as $rec){
22
23$type1 = $rec["type1"];
24
25$str = <<<EOM
26
27<script type="text/javascript">
28
29var type1 = '$type1'; 
30
31function addOption1() {
32
33var select = document.getElementById("type1");
34var option = document.createElement("option");
35option.text = type1;
36option.value = type1;
37select.appendChild(option);
38
39}
40addOption1();
41
42
43
44
45
46function clickType1(type1) {
47$stmt = $dbh->prepare('SELECT type2 FROM type WHERE id=? AND type1=?');
48$stmt->bindValue(1,$id,PDO::PARAM_INT);
49$stmt->bindValue(1,$type1,PDO::PARAM_STR);
50$stmt->execute();
51
52foreach($stmt as $rec){
53$type2 = $rec["type2"];
54var type2 = '$type2';
55
56function addOption2() {
57var select2 = document.getElementById("type2");
58var option2 = document.createElement("option");
59
60option2.text = type2;
61option2.value = type2;
62
63select2.appendChild(option2);
64}
65
66}
67}
68
69addOption2();
70</script>
71
72EOM;
73echo $str;
74}
75
76?>

色々試してみて問題なく動いた部分のコード
<option value="0" onClick="clickType1(type1)">選択してください</option>は怪しかったです

 <select name="type1" id="type1">
      <option value="0" onClick="clickType1(type1)">選択してください</option>
    </select>

     <br>

     <select name="type2" id="type2">
      <option value="0" >選択してください</option>
     </select>



<?php

ini_set('display_errors', "On");

$stmt = $dbh->prepare('SELECT * FROM type WHERE id=?');
$stmt->bindValue(1,$id,PDO::PARAM_INT);
$stmt->execute();

foreach($stmt as $rec){

$type1 = $rec["type1"];

$str = <<<EOM

<script type="text/javascript">

var type1 = '$type1'; 

function addOption1() {

var select = document.getElementById("type1");
var option = document.createElement("option");
option.text = type1;
option.value = type1;
select.appendChild(option);

}
addOption1();

エラーがでてしまいどうしてもうまくいかない部分

function clickType1(type1) {
$stmt = $dbh->prepare('SELECT type2 FROM type WHERE id=? AND type1=?');
$stmt->bindValue(1,$id,PDO::PARAM_INT);
$stmt->bindValue(1,$type1,PDO::PARAM_STR);
$stmt->execute();

foreach($stmt as $rec){
$type2 = $rec["type2"];
var type2 = '$type2';

function addOption2() {
var select2 = document.getElementById("type2");
var option2 = document.createElement("option");

option2.text = type2;
option2.value = type2;

select2.appendChild(option2);
}

}
}

addOption2();
</script>

EOM;
echo $str;
}

?>