PHP x JSでセレクトボックス内の変更

こんにちわ。
http://www.openspc2.org/reibun/javascript/form_selectmenu/015/
上記サイトを参考に１つ目のセレクトボックスの要素を変更したら、２つ目のセレクトボックスの要素を変更するというパーツを作ろうと思っています。

但し２つ目のセレクトボックスはDBに登録されたものを出力したいので、PHPを記述する必要がありますが、JSに関しては無知の為どういった処理を書けばいいのか分かりません。
下記にコードを記載しておりますので、間違いの指摘と正しいコードの書き方をご教授頂けますでしょうか。

よろしくお願い致します。

<?php //PHP接続 try{ $dbh = new PDO($takanome, $user, $pass); $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $sql = "SELECT * FROM shoptb ORDER BY shopid"; $stmt = $dbh->query($sql); $result = $stmt->fetchAll(PDO::FETCH_ASSOC); echo <<EMO <script language="JavaScript"> data-east = '<?php echo json_safe_encode($area == 1);?>'

data-west = '<?php echo json_safe_encode($area == 2);?>'
data-south = '<?php echo json_safe_encode($area == 3);?>'
data-north = '<?php echo json_safe_encode($area == 4);?>'
data-netr = '<?php echo json_safe_encode($area == 5);?>'

menuItem = [
["data-east"],
["data-west"],
["data-south"],
["data-north"],
["data-nr"],
];
itemNum = 5;// 項目数
function setMenuItem(n){
for(i=0; i<itemNum; i++){
document.myForm.shopid.options[i] = new Option(menuItem[n][i],menuItem[n][i]);
	}
}
</script>
EMO;

echo "<form name=myForm>";

//希望エリアここから
echo "<tr>";
echo "<td>エリア</td>";
echo "<td>";
echo "<select name="area" onChange=setMenuItem(this.selectedIndex)>";
echo "<option value=1>東</option>";
echo "<option value=2>西</option>";
echo "<option value=3>北</option>";
echo "<option value=4>南</option>";
echo "<option value=5>ネ</option>";
echo "</td>";
echo "</tr>";

//希望店舗ここから
echo "<tr>"
echo "<td>希望店舗</td>\n";
echo "<td>\n";
echo "<select name=shopid>\n";

foreach($result as $row3){
	echo "<option value=";
	echo $row3['shopid'];
	echo ">";
	echo htmlspecialchars($row3['shoplist'], ENT_QUOTES, 'UTF-8');
	echo "</option>\n";
}
	echo "</select>\n";
	echo "</td>\n";
	echo "</tr>\n";

	echo "</form>";

$dbh = null;
}catch(PDOException $e){
echo "エラー発生: " . htmlspecialchars($e->getMessage(), ENT_QUOTES, 'UTF-8') . "<br>";
die();
}