Question

我希望有人可以帮助我，我想提前感谢你们的帮助。我有一个PHP代码，它以这种方式收集一个数组中的信息：

$array_pages[$index][0]：菜单ID（它告诉我在哪个菜单中可以找到该页面）

$array_pages[$index][1]：这里我存储了页面名称（没有扩展名）

$array_pages[$index][2]：此字段包含一个字符串（包含有关该页面的更多信息）

这个多维数组已经由我的代码构建。

这是我想做的事情：在页面的末尾（我有$array_pages）我想放两个选择菜单：

<select name='themenu' style='width: 150px'>
<option value='1'> Menu number 1 </option>
<option value='2'> Menu number 2 </option>
<option value='3'> Menu number 3 </option>
</select>

在这个选择中，我想让用户在3中选择一个菜单。我遗失的部分如下：

我想在第一个旁边添加另一个。第二个选择必须根据第一个选择的值更改其内容。例如：

如果我选择菜单编号2（值2），则第二个选择应显示如下：

<select name='thepages' style='width: 150px'>
<option value='$array_pages[$index][2]'> $array_pages[$index][1] </option> 
<!-- ... -->
</select>

对于数组中具有$array_pages[$index][0] = 2的每个元素（2因为它是第一个选择的值）。是否可以在不刷新页面的情况下完成？

我试图了解如何用javascript做这样的事情，但我迷路了，我最终没有任何东西

我希望我已经很好地解释了我的问题......请帮忙！再次感谢你！

Answer 1

这里充满挑战的部分是JavaScript和PHP之间的相互作用。一旦页面呈现并发送到浏览器，PHP代码就完成了。其他一切必须用JavaScript完成（除非你正在做某种回发或AJAX模型）。

因此，在PHP完成之前，您必须使所有值完全可用于JavaScript代码。有两种方法可以做到这一点：

使用PHP创建所有可能的第二个<select>，但隐藏所有这些style=display:none）。然后，JavaScript将显示/隐藏相应的第二个菜单，具体取决于第一个菜单中的选择。
从PHP数组创建一个JavaScript数组，当选择第一个菜单选项时，JavaScript可以使用该数组动态填充第二个子菜单。

第一个选项可能更简单，代价是在响应中包含额外的HTML膨胀（如果你只有几个子菜单，那么这不应该是一个大问题）。所以你会得到以下内容：

<select name='themenu' style='width: 150px' onchange='changesubmenu(this)'>
  <option value='1'> Menu number 1 </option>
  <option value='2'> Menu number 2 </option>
  <option value='3'> Menu number 3 </option>
</select>
<select id="thepages1" style="display:none">
  <option>...</option>
  <option>...</option>
  <option>...</option>
</select>
<select id="thepages2" style="display:none">
  <option>...</option>
  <option>...</option>
  <option>...</option>
</select>
<select id="thepages3" style="display:none">
  <option>...</option>
  <option>...</option>
  <option>...</option>
</select>

您的changesubmenu() JavaScript函数看起来像这样：

var tempid=''; // save previous id to hide it

function changesubmenu(parent) {
    // get selected menu id
    var id = parent.value;
    var submenuid = "thepages"+id;

    // show the selected menu
    var submenuel = document.getElementById(submenuid);
    if (submenuel) submenuel.style.display = "";

    // hide the previously selected menu
    var oldsubmenuid = "thepages"+tempid;
    var oldsubmenuel = document.getElementById(oldsubmenuid);
    if (oldsubmenuel) oldsubmenuel.style.display = "none";

    // update old id for reference
    tempid = id;
}

演示：http://jsfiddle.net/NmKvK/

Answer 2

根据我的经验，使用javascript执行此操作的最佳方法是将所有可能性加载到仅显示您选择的内容的页面上（使用javascript）。

例如

select 1
select 2 hidden
select 3 hideen

在选择1中，您选择了选项1

select 1
select 2 showing
select 3 hidden

在选择1中，您选择了选项1

select 1
select 2 hidden
select 3 showing

如果您有很多内容，那么您需要使用ajax和第二个php页面动态执行此操作（或者您可以使用相同的php文件）。

因此，当选择选项1时，它会触发一个AJAX调用（带有一个选项1值的参数），它将例如content.php的内容加载到一个javascript变量中，然后从那里将它加载到一个占位符中在第一次选择之后。

希望这有帮助！

更改<select>值，给定一个数字并从数组中取值</select>

2 个答案: