隐藏/显示下拉菜单取决于另一个选项

我试图使它，所以当一个人从下拉菜单中选择一个选项，另一个下拉菜单显示出来。如果我有一个下拉菜单，有三个选项，温哥华，新加坡，纽约。当用户选择温哥华时，会出现一个带有几个选项的下拉菜单，如果他们选择纽约，则会出现另一个下拉菜单。为了使事情变得复杂，我还使用php，因为它最终将在服务器端运行。

echo "<script type='"text/javascript'">";
echo "function getDropDown(sel){";
echo  "hideAll();";
echo  "document.getElementById(sel.options[sel.selectedIndex].value).style.display ";
echo  "= 'block';";
echo "}";
echo "function hideAll(){";
echo  "document.getElementById('"vancouver'").style.display = 'none';";
echo  "document.getElementById('"singapore'").style.display = 'none';";
echo  "document.getElementById('"newyork'").style.display = 'none';";
echo "}";
echo "</script>";
echo    "<tr>"; 
        echo "<td align='"right'">";
        echo "<td>";
            echo "<select name='"optionDrop'" onChange='"getDropDown(this)'">";
               echo "<option value='"'">Please Select</option>";
                echo "<option value='"vancouver'">Vancouver</option>";
                echo "<option value='"singapore'">Singapore</option>";
                echo "<option value='"newyork'">New York</option>";
            echo "</select>";
        echo "</td>";
    echo "</tr>";
echo "<tr>"; 
echo "<td align='"right'">City</td>";
echo "<td>";
echo "<div id='"vancouver'" style='"display: none;'">";
            echo "<select name='"optionDrop'" >";
                echo "<option value='"'">Please Select</option>";
            echo "</select>";
            echo "</div>";
echo "<div id='"singapore'" style='"display: none;'">";
//echo "<select name='"optionDrop2'">";
  //              echo "<option value='"'">Please Select2</option>";
  echo "Sing";
echo "</div>";
echo "<div id='"newyork'" style='"display: none;'">";
  echo "New York";
echo "</div>";
echo "</td>";
echo "</td>";
echo "</tr>";

现在，当我选择"温哥华"选项时，下拉菜单会弹出，当选择其他选项时，会显示文本。但是如果我取消

//echo "<select name='"optionDrop2'">";
  //              echo "<option value='"'">Please Select2</option>";

然后什么都不工作了。无论我选择什么选项都没有显示。我完全卡住了，不知道它出了什么问题。