ajax dynamic selects

[suzkaw]

I have a form setup that can have pretty much an unlimited number of extra select fields.

I have it setup and working fine except for one problem that I can't seem to get worked out.

First off here is my javascript:

var cp = new cpaint();
cp.set_transfer_mode('get');
cp.set_response_type('text');
cp.set_persistent_connection(false);
cp.set_async(true);
cp.set_proxy_url('');
cp.set_debug(false);

function displaySec(type){
var QSTRING = type.options[type.selectedIndex].value;
cp.call('ajax.php', 'extra_search_fields', response, QSTRING);
return false;
}

function response(result) {
document.getElementById('response').innerHTML = result;
document.getElementById('optResponse').innerHTML = '';
}

function displayNewSec(opt){
var QSTRING = opt.options[opt.selectedIndex].value;
cp.call('ajax.php', 'extra_search_fields2', optResponse, QSTRING);
return false;
}

function optResponse(result) {
document.getElementById('optResponse').innerHTML += result;
}


Next the form code:

<select name="type" id="type" onChange="displaySec(this);">
//dynamic options
</select>
<div id="response" name="response"></div>
<div id="optResponse" name="optResponse"></div>


Now once I select the type the new value is displayed in the response div. But when values are shown in the optResponse with the onChange it automatically sets any selects to their first option. So I guess what I am asking is how would setup the function optResponse to keep what values are already selected and just adding the new html to the div?

[suzkaw]

Here is a link to an example which should hopefully make it a little clearer:
http://fuegocreative.com/68classifieds/search.php
Select "ATV" for category, then "Honda", and finally any color.