jquery function to populate textarea when a specific dropdown item is selec

[rsleventhal]

Hi,

I'm a total hack with jquery and need some help.

I've an html select list and a text area. The select has about 25 options in it. When a specific option is selected, I'd like to populate the text area with some text.

Example:
HTML:

<label for="comments">Technician Comments: </label><textarea name="comments" id="comments"></textarea><br />
<label for="updated_status">Status: </label>

<select name="updated_status" id="updated_status">
<option value="Select Status" selected="selected">Select Status</option>
<option value="Awaiting Drive from Customer">Awaiting Drive from Customer</option>
<option value="Received">Received</option>
<option value="DR Received">DR Received</option>
<option value="In Progress">In Progress</option>
<option value="DR Tech Notes (Internal Only)">DR Tech Notes (Internal Only)</option>
<option value="Parts Required">Parts Required</option>
<option value="Sourcing Parts">Sourcing Parts</option>
<option value="Parts Ordered">Parts Ordered</option>
<option value="Parts Received">Parts Received</option>
<option value="Awaiting Customer Approval">Awaiting Customer Approval</option>
<option value="Awaiting Customer Info">Awaiting Customer Info</option>
<option value="Awaiting Parts">Awaiting Parts</option>
<option value="OMX-Advanced Plus Approved">OMX-Advanced Plus Approved</option>
<option value="OMX-Advanced Plus Declined">OMX-Advanced Plus Declined</option>
<option value="CPR Advanced Approved">CPR Advanced Approved</option>
<option value="CPR Advanced Declined">CPR Advanced Declined</option>
<option value="CPR Advanced Plus Approved">CPR Advanced Plus Approved</option>
<option value="CPR Advanced Plus Declined">CPR Advanced Plus Declined</option>
<option value="Level 2 Required">Level 2 Required</option>
<option value="Level 2 Approved">Level 2 Approved</option>
<option value="Level 2 Declined">Level 2 Declined</option>
<option value="Level 3 Required">Level 3 Required</option>
<option value="Level 3 Approved">Level 3 Approved</option>
<option value="Level 3 Declined">Level 3 Declined</option>
<option value="Level 4 Required">Level 4 Required</option>
<option value="Level 4 Approved">Level 4 Approved</option>
<option value="Level 4 Declined">Level 4 Declined</option>
<option value="Complete - Successful">Complete - Successful</option>
<option value="Complete - Unsuccessful">Complete - Unsuccessful</option>
<option value="Complete - Shipped">Complete - Shipped</option>
<option value="Complete - PickedUp">Complete - PickedUp</option>
<option value="Action">Action</option>
</select><br />

The idea is that when the option 'DR Received' is selected, the textarea#comments gets pre-populated with some default text of my choosing.

The closest to getting this working (I think I'm close, anyway) is this:

var feedit = new Array(
{value : 'DR Received', areatext : 'Text goes here'},
);

$('#updated_status').change(function() {
    areatext = $(this).val()
    val = $(":selected", this).index();
    $("#comments").val(areatext);    

});

I'm against the wall on this one and would truly appreciate any help that might be offered.
TIA,
-Ray

[cereal]

Hi,

you could use an each loop:

$('#updated_status').on('change', function () {
    var e = $(this).val();
    $.each(feedit, function (key, val) {
        if (e == val.value) {
            $('#comments').val(val.areatext);
        }
    });
});

Live example: http://jsfiddle.net/o3g8sp6c/

[JJenZz]

If you change the select values to simple identifiers and then use them as object keys, this would be much easier. For example:

<select id="delivery-when">
  <option value="today">At some point today</option>
  <option value="week">Any time this week</option>
  <option value="year">I'm not in a rush</option>
</select>

<textarea id="delivery-comments"></textarea>

Then JavaScript:

var $when = $('#delivery-when'),
    $comments = $('#delivery-comments'),
    comments = {
        today: 'Thank you, we'll do our best',
        week: 'Brilliant, appreciate the slack',
        year: 'You da bomb!'
    };

$when.change(function() {
    var key = $when.val();
    if (key && comments[key]) {
        $comments.text(comments[key]);
    }
});