使用php创建的选择菜单“选项值”可过滤内部自定义选择错误

Question

I am building a website for my phone using JQuery mobile. I am using the "Filterable inside custom select" from the 1.4.5 demo.

It works when I manually add the option values in to the code.

<div class="ui-field-contain">
    <select id="filter-menu" data-native-menu="false" class="filterable-select">
        <option value="SFO">San Francisco</option>
        <option value="LAX">Los Angeles</option>

It works when I create one from a php file.

<div class="ui-field-contain">
  <select name="Position" id="Position" data-native-menu="false" class="filterable-select"  data-mini="true">
           <option value="<?php echo $PositionID ?>"><?php echo $position ?></option>

However when I populate more than one by looping them

foreach($getAllComp as $row)
{
   $PosID = $row["CompanyID"];
   $Pos = $row["Company"];
   $AllPositions .= "<option value=\"".$row['CompanyID']."">".$row['Company']."</option>
  ";
}

by creating

<div class="ui-field-contain">
        <select name="Position" id="Position" data-native-menu="false" class="filterable-select"  data-mini="true">
                   <option value="<?php echo $PositionID ?>"><?php echo $position ?></option>
                <?php echo $AllPositions ?>
        </select>

I get the following error, TypeError: listview is undefined

it refers to

form = listview.jqmData( "filter-form" ) 

from the function supplied from the demo

When looking at the browsers inspection console it shows the php populating the "option values" perfectly as they are in the previous two attempts.

I have tried moving the function to different places on my page etc amongst a heap of other things. Maybe it just can't be done? Thanks in advance.

The code is

( function( $ ) {
function pageIsSelectmenuDialog( page ) {
var isDialog = false,
    id = page && page.attr( "id" );
$( ".filterable-select" ).each( function() {
    if ( $( this ).attr( "id" ) + "-dialog" === id ) {
        isDialog = true;
        return false;
    }
});
return isDialog;
}
$.mobile.document.on( "selectmenucreate", ".filterable-select",     function( event ) {
    var input,
        selectmenu = $( event.target ),
        list = $( "#" + selectmenu.attr( "id" ) + "-menu" ),
        form = list.jqmData( "filter-form" );
            if ( !form ) {
        input = $( "<input data-type='search'></input>" );
        form = $( "<form></form>" ).append( input );
        input.textinput();
        list
            .before( form )
            .jqmData( "filter-form", form ) ;
        form.jqmData( "listview", list );
    }

    selectmenu
        .filterable({
            input: input,
            children: "> option[value]"
        })
         .on( "filterablefilter", function() {
            selectmenu.selectmenu( "refresh" );
        });
})
.on( "pagecontainerbeforeshow", function( event, data ) {
    var listview, form;
    if ( !pageIsSelectmenuDialog( data.toPage ) ) {
        return;
    }
    listview = data.toPage.find( "ul" );
    form = listview.jqmData( "filter-form" );
    data.toPage.jqmData( "listview", listview );
    listview.before( form );
})
.on( "pagecontainerhide", function( event, data ) {
    var listview, form;
    if ( !pageIsSelectmenuDialog( data.toPage ) ) {
        return;
    }
    listview = data.prevPage.jqmData( "listview" ),
    form = listview.jqmData( "filter-form" );
    listview.before( form );
});
})( jQuery );