Getting values from a PHP associative array using jQuery

Question

I Have a html select element generated in PHP from an array as follows

$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;

The select box uses a small javascript function to displays the country key of the selected country:

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

I want to now use that key to interface with another PHP array which contain information about the country and display that country in the #countrykey div instead of the selected value:

$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'),
);

Is this something that can be easily achieved, or is my approach entirely wrong?

Please see the updated answer.

Abhay Maurya
– Abhay Maurya

2016-11-22 13:21:51 +00:00
Commented Nov 22, 2016 at 13:21 — Abhay Maurya
– Abhay Maurya, Commented Nov 22, 2016 at 13:21

Machavity · Accepted Answer · 2016-11-22 13:12:35Z

5

You're on the right track here. So, here's how to get this to do what you want

Within your <script> block we want to output that array in JSON

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

Now, when you run countryfind we want to pull the value out of that object and display it as well. So let's modify your function

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

I don't know how you want it displayed (I just dumped it as text for simplicity), but this gets you the data you need so you can take it from there

answered Nov 22, 2016 at 13:12

Machavity♦

31.8k27 gold badges97 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abhay Maurya · Accepted Answer · 2016-11-22 13:20:06Z

1

You have to convert your php associative array into js object for further reference. As php runs on server and you are doing every action on client side so right after page loads, your php is useless. You need js var so that you can reference it further. Like this:

<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>

I hope it helps

edited Nov 22, 2016 at 13:20

answered Nov 22, 2016 at 13:11

Abhay Maurya

12.3k9 gold badges50 silver badges67 bronze badges

Collectives™ on Stack Overflow

Getting values from a PHP associative array using jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related