Question

I’m doing a select box with a list of items(dynamically created from an XML created by a webservice), and I’m unable to pull the selected value correctly. Here is what is happening.

What I’m sending:

onchange="changeFunction(this.options[this.selectedIndex].value)"

What I’m receiving:

function (a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!=

I’m the only thing I’m using is some self built functions and jQuery.

Any help would be superb.

Edit: here is the change function. All it is intended to do is build a form populated with values for given selected item.

function changeFunction(selection) {
    console.log(selection);
    $('#right').empty();
    var addNewFields = 'these will be the fields';
    $('#right').append(addNewFields);
}

Here is the select in question:

<select class="userSelection" id="userSelection" size="10" style="width:150px;" onchange="changeFunction(this.options[this.selectedIndex].value)"></select>

This is literally all the code in the html part of it. It’s being populated via ajax, and there are 2 divs, one for left, containing the select, and one for right, containing the content for the user.

Just for giggles, here is the code creating the options:

        var optionTag = '<option value="' + $(this).find('optionID').text + '" >' + $(this).find('optionName').text() + '</option>';
            $('#userSelection').append(optionTag);

Answer 1

var optionTag = '<option value="' + $(this).find('optionID').text + '" >' + $(this).find('optionName').text() + '</option>';

should be:

var optionTag = '<option value="' + $(this).find('optionID').text() + '" >' + $(this).find('optionName').text() + '</option>';

Notice that $(this).find('optionID').text should be $(this).find('optionID').text().

or even better, to avoid this soup:

var optionTag = $('<option/>', {
    value: $(this).find('optionID').text(),
    html: $(this).find('optionName').text()    
});