Javascript 创建一个基于mysqli的动态下拉列表

我正在尝试开发一个JS函数，该函数根据以前下拉列表中的选择创建一个新的下拉列表。基本上是一个下拉列表，用于根据州的选择选择城市列表。有人有什么建议吗

下面是我正在使用的javascript：

function city() {
var opt = document.getElementById('State');
var sel = opt.options[opt.selectedIndex].value;
var dropdown = document.getElementById('City');
document.write("<?php mysqli_select_db($GLOBALS['SSDN'],$database_SSDN);     $query_City = 'SELECT * FROM city WHERE State = sel ORDER BY City ASC'; $City = mysqli_query($GLOBALS['SSDN'],$query_City) or die(mysql_error()); while ($row_City = mysqli_fetch_array($City, MYSQL_ASSOC)) ?>");

var o = document.createElement('option');
o.text = document.write("<?php echo $row_City['City'];?>");
o.value = document.write("<?php echo $row_City['City'];?>");
dropdown.options.add(o);
}

功能城市（）{
var opt=document.getElementById（'State'）；
var sel=opt.options[opt.selectedIndex].value；
var dropdown=document.getElementById（'City'）；
文件。填写（“”）；
var o=document.createElement（'option'）；
o、 text=文件。写（“”）；
o、 value=document.write（“”）；
下拉。选项。添加（o）；
}

以下是html：

       <td><select name="State" class="Field" id="State">
      <?php
      while ($row_Recordset1 = mysqli_fetch_array($Recordset1, MYSQL_ASSOC)) {
          ?>
          <option value = "<?php echo $row_Recordset1['State'];?>"><?php echo $row_Recordset1['State'];?></option>
          <?php
      }
      ?>
    </select></td>
  </tr>
  <tr height="50">
    <td><div align="right" class="Label">Select New Rehbar City :</div></td>
    <td>&nbsp;</td>
    <td><select name="City" class="Field" id="City" onfocus="City();">

    </select></td>
  </tr>

选择新的雷巴尔城市：

我记得2011年的这一次：

---

它被称为链式选择框。上面的链接提供了如何实现它的教程。看看它，也许它会对你有所帮助。

Javascript是客户端脚本（编程）语言，PHP是服务器端编程语言，这意味着当页面已经刷新到客户端浏览器时，你不能运行PHP代码，而当页面已经加载时，你只能运行Javascript代码

这些行没有任何意义，也不会给您提供所需的结果：

document.write("<?php mysqli_select_db($GLOBALS['SSDN'],$database_SSDN);     $query_City = 'SELECT * FROM city WHERE State = sel ORDER BY City ASC'; $City = mysqli_query($GLOBALS['SSDN'],$query_City) or die(mysql_error()); while ($row_City = mysqli_fetch_array($City, MYSQL_ASSOC)) ?>");
o.text = document.write("<?php echo $row_City['City'];?>");
o.value = document.write("<?php echo $row_City['City'];?>");

document.write（“”）；
o、 text=文件。写（“”）；
o、 value=document.write（“”）；

将选项（数据）放入javascript变量中，然后在脚本中使用它们，如下所示：

<script>
var myOptions = [
    <?php
    // Select and fetch the data from database
    // Loop over your selected data and flush them into your javascript array
    while ($row_City = mysqli_fetch_array($City, MYSQL_ASSOC)){
        // if still have data:
        ?>'<?php echo $row_City["field_name"] ?>',<?php
        // else:
        ?>'<?php echo $row_City["field_name"] ?>'<?php
    }
    ?>
];

for (option in myOptions){
    // add each option to your drop down element
}

</script>

变量myOptions=[
'',''
];
用于（myOptions中的选项）{
//将每个选项添加到下拉元素中
}

还有什么不起作用呢？我用AngularJS做了类似的事情。它的双数据绑定功能非常方便，但需要学习和设置很多工作……请参阅他们的简介教程，了解它的帮助。