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

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 代码使用。您可以通过两种方式完成此操作:

1. 创造所有可能的秒<select>使用 PHP，但隐藏所有这些 ( style=display:none )。然后 JavaScript 将根据第一个菜单中的选择显示/隐藏适当的第二个菜单。
2. 从 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/