基于下拉选择的 PHP/JSON 数组显示值答案

【问题标题】：PHP/JSON Array display values based on dropdown selection基于下拉选择的 PHP/JSON 数组显示值
【发布时间】：2017-10-18 16:54:52
【问题描述】：

很难解决这个问题。我已经搜索过了，但我不确定我用来搜索的短语是否正确。

我有一个 JSON 文件，用于从外部源引入一组数据。使用 PHP，我对内容进行解码。我创建了一个显示键的下拉框，但我现在要做的是根据选择框选择的内容，使用键附加到的不同值动态填充打印输出。

    <?php
  // JSON string
  $json = file_get_contents("showrace.json");
  $races = json_decode($json, true);
?>
    <select id="raceSelect">
      <option value="select one" selected>Select One</option>
      <?php foreach($races as $key => $value) { ?>
        <option value="<?php echo $key ?>"><?php echo $value['race'] ?></option>
      <?php } ?>
    </select>
    <div id="template">
        Str Plus: #   Dex Plus: #   Wis Plus: #   Int Plus: #<br>
    </div>

以下是 JSON 文件的示例：

{
"Ithorian":{"price":0,"wis":3,"str":2,"lck":0,"int":2,"frc":0,"dex":-2,"con":2,"cha":-3,"app":"No","hp":1200,"ac":0,"race":"Ithorian","lang":"ithorian"},
"Weequay":{"price":1000,"wis":-2,"str":3,"lck":0,"int":-2,"frc":0,"dex":0,"con":2,"cha":-3,"app":"No","hp":1350,"ac":0,"race":"Weequay","lang":"weequay"}
}

在第一个sn-p中，模板div中的#将输出JSON值，例如“str”和“dex”等。虽然我能够找到如何设置选择以从 JSON 中提取键，但我对如何根据所选项目使用相应的值填充模板部分感到困惑。

提前致谢！

【问题讨论】：

标签： php arrays json

【解决方案1】：

这可能会帮助您入门，因为它并没有完全充实所有内容。但它涵盖了一些您可以使用的基础知识。

首先，您需要在 jquery 中使用 onchange 处理程序。每当有人用 :

改变他们的选择时，这都会触发

$("#raceSelect").change(function(e){
    // magic will go here (see further below)
});
// or
$("form").on("change","#raceSelect",function(e){
    // magic will go here (see further below)
});

接下来，您可能希望访问 jquery 区域中的所有 json 数据，以根据他们选择的内容显示这些值：

<script>
    // define this in your php page output near the top 
    // or within your jquery .ready block
    var jsonData = <?PHP echo $json;?>;
</script>

现在您已准备好使用 onchange 发挥一些神奇的作用。通过选择 id 访问 jsonData 中的正确数组，您可以将 spans 和 div 换成您心中的内容。组合示例如下：

<?PHP
// your php script
$json = file_get_contents("showrace.json");
$races = json_decode($json, true);
?>

<!-- your form here as you have it in your example -->

<div id="template">
    Str Plus: <span id="dat_str">#</span>   Dex Plus: #   Wis Plus: #   Int Plus: #<br>
</div>

<script>
$( document ).ready(function() {
    // this is your jquery .ready block

    var jsonData = <?PHP echo $json;?>;

    $("form").on("change","#raceSelect",function(e){
        var race = $(this).val();
        $("#dat_str").html( jsonData[race].str );
        // you can set the dex, and wiz, etc as well
        // following the same format to assign
    });
});
</script>

免责声明：我是手动输入的，并没有审查或测试它。它纯粹是希望帮助您的作品示例。

【讨论】：

感谢您的帮助，兰德尔！我现在有点密集 - “魔法”端口里有什么？
下面，我展示了一个“魔法将在这里”的例子。基本上，你选择了比赛，然后引用 jsonData 来用力量、健康、敏捷等替换页面上的位置。
抱歉，我似乎还假设您将 jquery 用于您的 javascript 前端...如果您不是，那么对于使用 jquery js 示例，我深表歉意。
不，没关系！我实际上页面上根本没有任何js，所以jquery就可以了。我只是没有用它太多。由于某种原因，它没有正确拉动，所以我现在正在尝试排除故障。我在 jquery 的标头中有脚本 src，上面有 var jsonData。
我增加了一点清晰度。 var jsonData 的赋值是 javascript，以防万一您认为它是纯 php 变量定义。这可能会让事情变得疯狂；）

【解决方案2】：

你可以用 JS 做到这一点

var raceSelect = $('#raceSelect').find(":selected").text();

并查看此链接以了解如何从 json 中进行选择然后打印你想要的 select from json

【讨论】：