使用多维数组填充选择答案

【问题标题】：Populate selects with multidimensional Array使用多维数组填充选择
【发布时间】：2019-03-15 12:49:06
【问题描述】：

我在尝试使用多维数组填充几个选择时遇到问题。

据我所知，我应该使用 javascript，但我不知道为什么某些东西不起作用，所以这里是代码 WITHOUT javascript。

$turnos= array();
array_push($turnos, array('nombre' => 'Easy Arica - Turno A', 'tipoturno' => '44', 'lugar' => '318', 'horas' => '11:00:00', 'monto' => '24'));
array_push($turnos, array('nombre' => 'Easy Arica - Turno B', 'tipoturno' => '44', 'lugar' => '318', 'horas' => '12:00:00', 'monto' => '24'));
array_push($turnos, array('nombre' => 'Easy Arica - Turno C', 'tipoturno' => '44', 'lugar' => '318', 'horas' => '13:00:00', 'monto' => '24'));
array_push($turnos, array('nombre' => 'Paris Arica - Turno A', 'tipoturno' => '44', 'lugar' => '254', 'horas' => '14:00:00', 'monto' => '24'));
array_push($turnos, array('nombre' => 'Paris Arica - Turno B', 'tipoturno' => '44', 'lugar' => '254', 'horas' => '15:00:00', 'monto' => '24'));
?>

然后列出它们，我这样做

<select type="select" style="width: 150px" v-model="att.shift_turnonombre" :disabled="'si' == att.shift_turnoextra ? false : true">
<?php foreach ($turnos as $turno){
    echo '<option value="'.$turno['nombre'].'">'.$turno['nombre'].'</option>';
} ?>
</select>

一切正常，我可以毫无问题地列出它们，我什至可以将数据保存在数据库中。

但我想要添加另一个选择字段，例如，如果我使用 $turno['nombre'] 选择一个选项，第二个选择自动填充 $turno['tipoturo']。

这个想法是在数组中进行，因为当我完成后，我认为所有的数据将是大约 300 个数组。

【问题讨论】：

您好！如果第二个选择的值将由第一个选择决定，为什么它首先是一个选择？第二次选择的目的是什么？
这称为“依赖选择”。如果你用谷歌搜索，你会发现教程比我们在此处的答案中解释得更好。
@Michael Beeson 不一定是选择，也可以是输入。

标签： javascript php arrays multidimensional-array

【解决方案1】：

正如您所怀疑的，您将需要一些 javascript。现在，如何填充第二个输入取决于您是否愿意使用 data-* 属性（自定义数据作为属性），还是愿意将所有数据保留在服务器上。如果是后者，则需要使用 ajax 调用。来自本教程中的示例：

https://www.youtube.com/watch?v=q5jNAhYcHEI

如果您乐于使用“data-*”属性，您可以简单地将选择创建更改为：

<?php foreach ($turnos as $turno){
    echo '<option data-tipoturno="'.$turno['tipoturno'].'"  value="'.$turno['nombre'].'">'.$turno['nombre'].'</option>';
} ?>

然后javascript将如下：

var parent = document.getElementById("parent");
var child = document.getElementById("child");

parent.addEventListener("change", function() {
  child.value = parent.options[parent.selectedIndex].getAttribute('data-tipoturno')
});

我使用一些虚构的数据制作了一个 sn-p：

var parent = document.getElementById("parent");
var child = document.getElementById("child");

parent.addEventListener("change", function() {
  child.value = parent.options[parent.selectedIndex].getAttribute('data-tipoturno')
});

<form>
<select id="parent">
<option data-tipoturno="5" val="Michael">Michael</option>
<option data-tipoturno="12" var="Sam">Sam</option>
<option data-tipoturno="56" var="Jane">Jane</option>
<option data-tipoturno="24" var="Dave">Dave</option>
</select>
<input id="child" type="text"/>
</form>

【讨论】：