How do i create a dropdown menu which puts data from an array in a textfield

I want to add this functionality to my form. when a option from a dropdown menu is selected i want it to input the text field above with the corresponding info.

objBMW = {
     "Sedan":"5-series",
     "Convertible":"6-series",
     "Truck":"X5",
     "Coupe":"3-series",
     "Hatchback":"5-series GT"
  };

<form name="form1" action="formhandler">

<input type="text" name="typecar">

<select name="BMWCars"> 
<option value="Sedan">Sedan</option> // when this option is chosen put string "5-series" in textfield above
<option value="Convertible">Convertible</option> // when this opt开发者_运维知识库ion is chosen put string "6-series" in textfield above
<option value="Truck">Truck</option> // when this option is chosen put string "X5" in textfield above
<option value="Coupe">Coupe</option> // when this option is chosen put string "3-series" in textfield above
<option value="Hatchback">Hatchback</option> // when this option is chosen put string "5-series GT" in textfield above
</select>

Javascript:

document.forms.form1.BMWCars.onchange = function(){
    document.forms.form1.typecar.value = objBMW[this.value];
}

http://jsfiddle.net/xZsc7/

I would do it like this:

<input type="text" name="typecar" id="typecar" />

<?php
$objBMW = array('Sedan' => '5-series', 'Convertible' => '6-series');
?>
<select name="BMWCars" id="BMWCars">
<?php
    foreach($objBMW as $key => $value)
    {
        echo '<option value="'.$value.'">'.$key.'</option>';
    }
?>
</select>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
      $('#BMWCars').change(function() {
              $('#typecar').val($("#BMWCars option:selected").val());
            }).trigger('change');
    });
</script>