Question

我在尝试用多维数组填充一对选择项时遇到问题。

据我了解，我应该使用javascript，但是我不知道为什么某些东西无法正常工作，所以这里是没有 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 ['tipoturno']自动填充。

这个想法是在数组中完成，因为完成后我认为所有数据都将在300个数组左右。

Answer 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')
});

我已经使用一些发明的数据制作了一个片段：

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>

用多维数组填充选择

1 个答案: