Select menu and .change problem
I am having a problem with a generic function (see below) that I have created to generate select drop down menus. Note: I don't show the CSS with this sample:
The function would be called like this (note texts is an array):
this.sourcemenu = new Dropdown("#menus", "datasource", texts, 140);
this.chartmenu = new Dropdown("#menus", "charttype", texts, 70);
The getValue function should return the current value of each menu. But it appears that if two menus are created, a call to app.sourcemenu.getValue() (for example) will return a value from the last menu changed, rather than the menu it is supposed to be associated with. eg. instead of separate 'objects', it appears that the .change handler isn't unique to each menu or that the value isn't unique.
I have tried jQuery .data as an alternative way of storing the values, but the problem is the same.
function Dropdown(container, elementname, texts, width)
{
me = this;
this.value = texts[0];
// write html
$(container).append("<select class=\"menu\" id=\""+elementname+"ID\"></select>");
$("#"+elementname+"ID").html("<option selected value=\""+texts[0]+"\">"+texts[0]+"</option>");
for(i=1; i<texts.length; i++){$("#"+elementname+"ID").append("<option value=\""+texts[i]+"\">"+texts[i]+"</option>");}
$(container+" #"+elementname+"ID").css( 'width', width);
// set up event handling to update the value for this menu when changed by the user
$("#"+elementname+"ID").change(function() {
me.value = $(this).find(":selected").val();
});
this.getValue=function ()
{
return me.value;
}
}