使用数组填充动态下拉列表 - php

我正在尝试使用多维数组在PHP中进行动态下拉列表。

我的第一个选择框正确填充,但是在选择建筑物时,我需要第二个选择框来显示用于第一个选择的相应显示(大厅,休息室等)

这是数组:

$displays = array(
  "Company" => array(
    "Building 1"=>array(
      "Displays"=>array(
        "Lobby",
        "Break Room",
        "Office",
        ),
      ),
    "Building 2"=>array(
      "Displays"=>array(
        "Break Room",
        "Office",
        ),
      ),
    "Building 3"=>array(
      "Displays"=>array(
        "Lobby",
        "Break Room",
        ),
      ),
    "Building 4"=>array(
      "Displays"=>array(
        "Lobby",
        "Break Room",
        "Office"
      ),
    ),
  ),
);

到目前为止,我有两个选择框:

/*This select option works to fill the list with building 1 through building 4, as it should*/
<select class="form-control" id="plantSelect">
    <?php foreach($displays["Company"] as $area_name => $area_details): ;?>
    <option><?php echo $area_name ?></option>
    <?php endforeach ?>
</select>

/*I need this one to show the displays (lobby, break room, office, etc.) for each builing as it's selected*/
<select class="form-control" id="areaSelect">
    <?php foreach($displays["Company"] as $area_name => $area_details): ;?>
    <option><?php echo $area_details?></option>
    <?php endforeach ?>
</select>

和我不完整的jQuery:

 <script type="text/javascript">
    $("#plantSelect").change(function() {
     $("#areaSelect").load("/*don't know what to put here*/" + $("#plantSelect").val());
    });
</script>

非常感谢您完成此工作

参考方案

json_encode数组,并将其作为JS对象存在于页面中

var Company = {
  "Building 1": [{
    "Displays": [
      "Lobby",
      "Break Room",
      "Office"
    ]
  }],
  "Building 2": [{
    "Displays": [
      "Break Room",
      "Office"
    ]
  }],
  "Building 3": [{
    "Displays": [
      "Lobby",
      "Break Room"
    ]
  }],
  "Building 4": [{
    "Displays": [
      "Lobby",
      "Break Room",
      "Office"
    ]
  }]
};

$.each(Company, function(bld) {
  $("#plantSelect").append('<option value="' + bld + '">' + bld + '</option>')
});
$("#plantSelect").on("change", function() {
  $("#areaSelect")[0].length=1;
  if (this.value) {
    $.each(Company[this.value][0].Displays,function(_,disp) {
      $("#areaSelect").append('<option value="' + disp + '">' + disp + '</option>')
    });
  }  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="plantSelect">
  <option value="">Please select</option>
</select>

<select class="form-control" id="areaSelect">
  <option value="">Please select</option>
</select>

PHP-复选框组 - php

我有一个需要发布的表单复选框组。<input type="checkbox" value="true" checked name="chk0[]"> <input type="checkbox" value="false" name=…

Div单击与单选按钮相同吗? - php

有没有一种方法可以使div上的click事件与表单环境中的单选按钮相同?我只希望下面的div提交值,单选按钮很丑代码输出如下:<input id="radio-2011-06-08" value="2011-06-08" type="radio" name="radio_date&#…

使用查询获取ID - php

我正在创建一个电子商务网站,我试图添加选项,即买家通过下拉列表选择商品大小,然后将变量传递给jquery,然后将jquery传递给php,如果商品大小可用有库存时,将显示一个添加到购物车按钮,否则显示无库存按钮。我设法使其工作到将项目大小传递给php为止,但是我不知道如何传递产品ID,这是检查数据库所必需的。大小选择:<form id="fo…

使用Ajax呈现html表 - php

我想知道如何实现以下项目其实我有一个php代码,可以渲染一张桌子<table id = "oldata" class ="table table-bordered"> <thead> <tr class ="success"> <th class="…

在jquery中每行的表中动态创建按钮 - php

只有第一行正在更新。.我能够创建动态创建的选择标签和按钮,但是每次我选择下拉菜单时,只有第一行正在更新,其他行将仅警告“选择第一”。即使我已经选择了一个选项。jQuery func'$('input').each(function(){ if($(this).attr("type")=="button…