选择框中的选择值数组中的其他值将出现在输入字段中

Question

I have an array data below:

<?php
  $names = array('Ireneo Crodua' => array('Australia', 'contact 3883 441', 'id_01'), 
                 'Almads Bangal' => array('India', 'contact 3883 811', 'id_02' ),
                 'Rechard Canonigo' => array('America', 'contact 3883 333', 'id_03'),
                 'Marjohn bebeloni' => array('China', 'contact 3883 444', 'id_04')
  );

?>

I have a select box to select the name of the person

<form action="post">

  <p><label>Select Name</label>
    <select>
      <?php 
        foreach($names as $name => $place){
          echo "<option>" . $name . "</option>";
        }
      ?>

    </select>
  </p>


  <p><label>Place</label><input name="place" value="" /></p>
  <p><label>Contact</label><input name="contact" value="" /></p>
  <p><label>ID Number</label><input name="id_number" value="" /></p>


</form> 

is that posible if I select for example Rechard Canonigo in my select box the array value for Rechard Canonigo will appear automatically in input field.

example:

America will automatically appear in input field => place and contact 3883 333 will also appear in input field => contact and the last the id_03 will appear in id_number input field

I fount this jquery code:

$(function(){
  $('select').on('change',function(){
     $('input[name=place]').val($(this).val());
  });
});

work similar in what i want to achieve but the problem is it only give one result in the array

Answer 1

Yes its, quite possible, you already got the first field working. For the second and third field, you could import those array inside javascript thru the use of json_encode().

<script type="text/javascript">
var names = <?php echo json_encode($names); ?>; // put it inside
$(function(){
    $('select').on('change',function(){
        // on select change
        var selected_value = $(this).val();
        $('input[name=place]').val(selected_value);
        // since the selected value is a key just point it to the object and get its values
        $('input[name=contact]').val(names[selected_value][1]);
        $('input[name=id_number]').val(names[selected_value][2]);
    });
});
</script>

Sample Demo