Question

有一段困难时间试图解决这个问题。我已经搜索过，但我不确定我用来搜索的短语是否正确。

我有一个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"}
}

在第一个片段中，模板div中的＃将是JSON值的输出，例如“str”和“dex”等。虽然我能够找到如何将选择设置为从JSON中绘制键，但我对如何使用相应的值填充模板部分感到困惑。

提前致谢！

Answer 1

你可以用JS

来做

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

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

Answer 2

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

首先，您需要在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做一些魔术。在jsonData中访问正确的数组，并选择id，您可以将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>

免责声明：我手动输入了这个，并没有检查或测试它。它纯粹是一个有希望帮助你的作品的例子。

PHP / JSON数组显示基于下拉列表选择的值

2 个答案: