Populating 2 form fields based on SELETLIST selection

Question

This is driving me crazy. I have a form with 2 fields.

<select name="serviceDescription" id="serviceDescription" onchange="PopulateDescriptionsField();"/> </select>    

I populate the selectList from a CFC call via JQuery. That part works. I have a second field:

<input name="descriptionEdit" id="descriptionEdit" size="50">

I would like to set the value of descriptionEdit to the whatever value is selected in the serviceDescription selectlist.

I cant seem to figure this out.

Answer 1

With Jquery is:

$('body').on('click','#serviceDescription',function() {
    var value = $('#serviceDescription').val();
    $('#descriptionEdit').attr('value',value);
});

Answer 2

have a look in to below code to edit selected option in the serviceDescription list and it may help you to implement the same.

 $('#serviceDescription').change(function(){ var optValue = $(':selected',this).text(); $('#descriptionEdit').val(optValue); $("#descriptionEdit").keyup(function() { var value = $( this ).val(); var newOptval = $( "#descriptionEdit" ).text( value ); $(':selected','#serviceDescription').text(value).val(value); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <select name="serviceDescription" id="serviceDescription"> <option value='service1'>service1</option> <option value='service2'>service2</option> <option value='service3'>service3</option> <option value='service4'>service4</option> <option value='service5'>service5</option> <option value='service6'>service6</option> <option value='service7'>service7</option> <option value='service8'>service8</option> </select> <input name="descriptionEdit" id="descriptionEdit" size="50">