如何使用多个下拉列表从特定PHP数组回显变量

我对PHP相当陌生，所以请容忍我。我正试图找到一个解决多下拉/数组问题的方法，这个方法对我来说很复杂，但希望有一个简单的方法。我没有使用任何数据库，只使用存储在文件中的数组

我有三个html下拉列表：

<form action="">
<select name="size">
<option value="large" selected>Large</option>
<option value="small">Small</option>
</select>

<select name="colour">
<option value="warm" selected>Warm</option>
<option value="cold">Cold</option>
</select>

<select name="object">
<option value="fruit" selected>Fruit</option>
<option value="clothes">Clothes</option>
<option value="bird">Bird</option>
</select>
</form>

我正在尝试做以下工作

当用户从三个下拉列表中选择一个选项时，下面回显的文本会根据所选数组的不同而变化

例如：

用户选择大、暖和鸟

结果是：一只巨大的红色猫头鹰，或者一只巨大的黄色乌鸦

用户选择小，冷和水果

与之相呼应的结果是：一个微小的蓝苹果或任何其他变种

是否有任何方法可以使用php、JavaScript和/Ajax或任何其他方法实现这一点

---

如有任何建议或建议，将不胜感激。谢谢。

我想这应该可以

<?php
$size = array('large' => array("massive", "large", "extra large"),
              'small' => array("tiny", "little", "small")
              );
$colour = array('warm' => array("red", "yellow", "orange"),
                'cold' => array("blue", "green", "purple")
                );
$object = array('fruit' => array("apple", "banana", "pear"),
                'clothes' => ("hat", "sock", "jumper"),
                'bird' => ("raven", "eagle", "owl")
                );

?>

<script>
$(function() {
    var selections = {
        size: <?php echo json_encode($size) ?>,
        colour: <?php echo json_encode($colour) ?>,
        object: <?php echo json_encode($object) ?>
    };

    $('select').change(function() {
        var which = this.name;
        var items = selections[which][this.value];
        var pick = items[Math.floor(Math.random()*items.length)]; // Pick random item
        $("#show_"+which).text(pick);
    });
});
</script>

<form action="">
    <select name="size">
    <option value="large" selected>Large</option>
    <option value="small">Small</option>
    </select>

    <select name="colour">
    <option value="warm" selected>Warm</option>
    <option value="cold">Cold</option>
    </select>

    <select name="object">
    <option value="fruit" selected>Fruit</option>
    <option value="clothes">Clothes</option>
    <option value="bird">Bird</option>
    </select>
</form>

<div id="output">
A <span id="show_size"></span>, <span id="show_colour"></span> <span id="show_object"></span>
</div>

---

它使用json_encode将PHP数组转换为Javascript数组。然后，当您从其中一个菜单中选择一个项目时，它将使用该项在对象中查找子数组，选择其中的一个随机元素，并将其显示在下面相应的范围中。

Ah，这太棒了。我以前从未听说过json_编码。是否可以更改代码，以便在按下提交按钮时仅显示文本并以新的随机结果刷新文本？是的，您可以将代码附加到按钮的单击方法，而不是选择的更改方法。我恐怕无法按需要的方式使其工作。当我将代码更改为使用click和submit按钮时，它不再显示任何内容。我尝试编辑select.change函数，并在其后面添加了：$'submit'.changefunction{var pick=items[Math.floorMath.random*items.length]；//pick random item$show.+which.textpick；}，但仍然没有成功。我该怎么做才能使其仅在按下submit时显示选择，然后在再次按下submit时显示所选数组中的新随机变量？

<?php
$size = array('large' => array("massive", "large", "extra large"),
              'small' => array("tiny", "little", "small")
              );
$colour = array('warm' => array("red", "yellow", "orange"),
                'cold' => array("blue", "green", "purple")
                );
$object = array('fruit' => array("apple", "banana", "pear"),
                'clothes' => ("hat", "sock", "jumper"),
                'bird' => ("raven", "eagle", "owl")
                );

?>

<script>
$(function() {
    var selections = {
        size: <?php echo json_encode($size) ?>,
        colour: <?php echo json_encode($colour) ?>,
        object: <?php echo json_encode($object) ?>
    };

    $('select').change(function() {
        var which = this.name;
        var items = selections[which][this.value];
        var pick = items[Math.floor(Math.random()*items.length)]; // Pick random item
        $("#show_"+which).text(pick);
    });
});
</script>

<form action="">
    <select name="size">
    <option value="large" selected>Large</option>
    <option value="small">Small</option>
    </select>

    <select name="colour">
    <option value="warm" selected>Warm</option>
    <option value="cold">Cold</option>
    </select>

    <select name="object">
    <option value="fruit" selected>Fruit</option>
    <option value="clothes">Clothes</option>
    <option value="bird">Bird</option>
    </select>
</form>

<div id="output">
A <span id="show_size"></span>, <span id="show_colour"></span> <span id="show_object"></span>
</div>