input and dropdown results grouped in textarea

by katalin_2003

HTML

<select id="dropdown1" name="dropdown1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<input type='text' id='field1' value='' />
<br>
<select id="dropdown2" name="dropdown2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<input type='text' id='field2' value='' />
<br>
<select id="dropdown3" name="dropdown3">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<input type='text' id='field3' value='' />
<br>
<br>
<textarea id='messagebox' rows="6" style="width:280px"></textarea>

JavaScript

jQuery("#dropdown1, #dropdown2, #dropdown3, #field1, #field2, #field3").on("blur", function () {
    getname();
});

function getname() {
    jQuery('#messagebox').val(jQuery('#dropdown1').val() + " - " + jQuery('#field1').val() + "\n" + jQuery('#dropdown2').val() + " - " + jQuery('#field2').val() + "\n" + jQuery('#dropdown3').val() + " - " + jQuery('#field3').val());
}