使用jQuery从PHP关联数组中获取值

Question

我有一个HTML选择元素，是通过以下PHP数组生成的：

$countries = array(
    array('iso' => 'AF', 'name' => 'Afghanistan',  'key' => 'Red'),
    array('iso' => 'AX', 'name' => 'Åland Islands','key' => 'Yellow'),
    array('iso' => 'AL', 'name' => 'Albania',      'key' => 'Blue')
);

$select = '<select id="country_select" onchange="countryfind()">';
foreach($countries as $country) {
    $select .= '<option value="'.$country['key'].'">'.$country['name'].'</option>';
}
$select = '</select>';

return $select;

选择框使用一个小的JavaScript函数来显示所选国家的国家代码：

function countryfind(){
    jQuery('#countrykey').text(
         jQuery('#country_select option:selected').val()
)};

我现在希望使用这个键与另一个包含国家信息的PHP数组交互，在#countrykey div中显示该国家而不是所选值:

$si_federations = array(
    'Red'   => array('name'=>'A Red Country', 'url'=>'http://www.redcountry.com'),
    'Blue'   => array('name'=>'A Blue Country', 'url'=>'http://www.soroptimisteurope.org'),
);

这是一件容易实现的事情吗，还是我的方法完全错误？

- Christian Mayne

---

请查看更新后的答案。 - Abhay Maurya

Answer 1

你走在正确的道路上。现在，让我告诉你如何使它实现你想要的功能。

在你的 <script> 代码块中，我们需要将该数组以 JSON 格式输出。

var federations = <?php echo json_encode($si_federations); ?>;

现在，当你运行countryfind时，我们希望从该对象中提取值并将其显示出来。因此，让我们修改你的函数。

function countryfind(){
    var fed;
    var selected = jQuery('#country_select option:selected').val();
    if(federations[selected] !== undefined) fed = federations[selected];
    else fed = {"name":"Default Name", "url":""}; //placeholders if it's not defined
    jQuery('#countrykey').text(
         selected + ' - ' + fed.name + ' ' + fed.url;
)};

我不知道您希望如何显示它（我只是将其作为文本转储，以简化操作），但这将为您提供所需的数据，以便您可以从那里开始进行操作。

- Machavity

Answer 2

您需要将PHP关联数组转换为JS对象以供进一步引用。由于PHP在服务器上运行，而您正在客户端执行每个操作，因此在页面加载后，您的PHP是无用的。您需要JS变量以便您可以进一步引用它。

像这样：

<script>
var countries = [];
var country = {};
<?php foreach($si_federations as $k => $country): ?>
    <?php foreach($country as $key=>$val): ?>
        country['<?php echo $key; ?>'] = '<?php echo $val; ?>';
    <?php endforeach; ?>
    countries['<?php echo $k; ?>'] = country;
<?php endforeach; ?>

function countryfind(){
     var keyVal = jQuery('#country_select option:selected').val();
     jQuery('#countrykey').text('name: '+countries[keyVal]['name']+' url: '+countries[keyVal]['url']);
 }

</script>

我希望它有所帮助

- Abhay Maurya