How do i get different information in a field based on what i select in a dropdown menu?

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. For example:

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

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

<select name="BMWCars"> 
<option value="Sedan">Sedan</option> // 开发者_C百科when this option is chosen put string "5-series" in textfield above
<option value="Convertible">Convertible</option> // when this option 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>

</form>

How can this be done with and without having to connect to the to get strings?

The code is tidier if you make your HTML conform to what you need.

http://jsfiddle.net/TgM2W/3/

<form name="form1" id="form1" action="formhandler">
    <input type="text" name="typecar" id="typecar">
    <select name="BMWCars" id="BMWCars"> 
        <option value="">Select one...</option>
        <option value="5-series">Sedan</option>
        <option value="6-series">Convertibles</option>
        <option value="X5">Truck</option>
        <option value="3-series">Coupe</option> 
        <option value="5-series GT">Hatchback</option>
    </select>
</form>

JavaScript (without jQuery):

window.onload = function() {
    document.forms['form1'].elements['BMWCars'].onchange = function() {
        var opts = this.options;
        document.forms['form1'].elements['typecar'].value = opts[opts.selectedIndex].value;
    };
};

or using jQuery:

$(document).ready(function() {
    $('#BMWCars').change(function() {
        var opts = $(this)[0].options;
        $('#typecar').val(opts[opts.selectedIndex].value);
    });
});

However, if you can't change the HTML, just use an object to store the values and reference that:

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

window.onload = function() {
    document.forms['form1'].elements['BMWCars'].onchange = changer;
};

function changer() {
    var opts = this.options;
    document.forms['form1'].elements['typecar'].value =objBMW[opts[opts.selectedIndex].value];
};

Jan. This is what you have to do:

1. Add identifier to all your referenced items in the HTML.
2. Write an small Javascript code to detect changes in the dropdown and update the textfield accordly.

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

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

<select name="BMWCars" id="dropdown"> 
<option value="5-series">Sedan</option>
<option value="6-series">Convertible</option>
<option value="X5">Truck</option>
<option value="3-series">Coupe</option>
<option value="5-series GT">Hatchback</option>
</select>

</form>

<script type="text/javascript">
var dropdown = document.getElementById( 'dropdown' );
dropdown.onchange = function() {
    document.getElementById( 'typecar' ).value = dropdown.value;
};
</script>

You're going to want to do it in jQuery (or javascript).

$("option").change(function() {
     var value;  

    //Do some logic to get the value you want to put in the textbox

    $("input[name='typecar']").val(value);
});

Depending on the complexity of your site, there's a couple different ways you can grab the value to put in your textbox. If it will only ever be those 5 options, I would suggest a switch...case. Like this:

$("option".change(function() {
    var value;

    switch($(this).val()) {
          case "Sedan":
               value = "5-series";
               break;

          case "Convertible":
               value = "6-series";
               break;

          case "Truck":
               value = "X5";
               break;

          case "Coupe":
               value = "3-series";
               break;

          case "Hatchback":
               value = "5-series GT";
               break;
     }

    $("input[name='typecar']").val(value);

});

 $('select').change(function() {
     var value = $(this).val();
        $("#typecar").val(value);
});

Should do it. Add an ID of typecar to your input field first however.