iPhone Type Wheel Woes

[DS928]

I have an iPhone type wheel for picking options. When I have no headings the wheel works well. However; when I add a header to the options, the wheel selection bar fails to line up on the option and the incorrect option is selected, it seems to start at one off, then two. Here is the page....

http://www.menuhead.com/example.php

This is the part of the javascript that I've been playing with.




if (data.target[0].options.length > 0) {
var header="" // HERE
for(var i=0;i<data.target[0].options.length;i++) {

var option = data.target[0].options[i];
if($(data.target[0].options[i]).closest('optgroup').attr('label') && header!=$(data.target[0].options[i]).closest('optgroup').attr('label')){
//if(header!=$(data.target[0].options[i]).closest('optgroup').attr('label')){ // HERE

$('<li/>', {id: ulId+'_', value: "", text: $(data.target[0].options[i]).closest('optgroup').attr('label')}).appendTo('#'+ulId); // HERE
header=$(data.target[0].options[i]).closest('optgroup').attr('label'); // HERE
$('#'+ulId+'_').css({'line-height': '37px'});
//$('#'+ulId+'_'+option.value).css({'line-height': '37px'});

//$('#'+ulId+'_'+option.value).css({'line-height': '37px'});
//header=$(data.target[0].options[i]).closest('optgroup').attr('label'); // HERE
} // HERE

$('<li/>', {id: ulId+'_'+option.value, value: option.value, text: option.text}).appendTo('#'+ulId);
$('#'+ulId+'_'+option.value).css({
'height': '37px',
'line-height': '37px',
'text-align': 'center',
'display': 'block',
'padding': '0px',
'margin': '0px'
});
}

[DS928]

Problem Solved. How do you close a thread?

[james438]

We can close it, but it would be better if you could post your solution so that others with a similar problem can see how you solved it. You can also edit the first post and then select "Go Advanced" and mark the post as resolved so that others know that you were able to find a satisfactory answer.