我正在使用JQuery Mobile版本1.4.2，并且在我的一个模板中的某个时刻，我想使用irs可过滤的选择菜单。但是有一个问题：
该特定元素附加了一个特定的id id="filter-menu"，这意味着每个模板只能使用一次（例如仅用于苹果列表）。
因此我问：我怎么可以在同一个网页上多次使用它？
提前致谢。
答案 0 :(得分：4)
只要此ID连接特定的选择和过滤器输入，您就可以使用任何您想要的ID。
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
<a href="#second" class="ui-btn-right">Next</a>
</div>
<div data-role="content">
<form>
<input type="text" data-type="search" id="filterable-input1"/>
</form>
<form data-role="controlgroup" data-filter="true" data-input="#filterable-input1">
<label for="pizza">
Pizza
<input type="checkbox" id="pizza"/>
</label>
<label for="goulash">
Goulash
<input type="checkbox" id="goulash"/>
</label>
<label for="falafel">
Falafel
<input type="checkbox" id="falafel"/>
</label>
<label for="spring-rolls">
Spring Rolls
<input type="checkbox" id="spring-rolls"/>
</label>
</form>
<form>
<input type="text" data-type="search" id="filterable-input2"/>
</form>
<form data-role="controlgroup" data-filter="true" data-input="#filterable-input2">
<label for="pizza">
Pizza
<input type="checkbox" id="pizza"/>
</label>
<label for="goulash">
Goulash
<input type="checkbox" id="goulash"/>
</label>
<label for="falafel">
Falafel
<input type="checkbox" id="falafel"/>
</label>
<label for="spring-rolls">
Spring Rolls
<input type="checkbox" id="spring-rolls"/>
</label>
</form>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second" data-theme="a" >
<div data-role="header">
<h3>
Second Page
</h3>
<a href="#index" class="ui-btn-left">Back</a>
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
请注意，在一种情况下，我使用＃filterable-input1 ，在其他情况下＃filterable-input2 。
再次，这是一个平静的蛋糕，下次自己尝试，我不是要取笑你，这就是你将学会如何继续自我。
工作示例：http://jsfiddle.net/Gajotres/zCq98/
<form>
<select id="filter-menu" data-native-menu="false">
<option value="SFO">San Francisco1</option>
<option value="LAX">Los Angeles1</option>
<option value="YVR">Vancouver1</option>
<option value="YYZ">Toronto1</option>
</select>
</form>
<form>
<select id="filter-menu2" data-native-menu="false">
<option value="SFO">San Francisco2</option>
<option value="LAX">Los Angeles2</option>
<option value="YVR">Vancouver2</option>
<option value="YYZ">Toronto2</option>
</select>
</form>
$.mobile.document
// "filter-menu-menu" is the ID generated for the listview when it is created
// by the custom selectmenu plugin. Upon creation of the listview widget we
// want to prepend an input field to the list to be used for a filter.
.on( "listviewcreate", "#filter-menu-menu, #filter-menu2-menu", function( e ) {
var input,
listbox = $( "#filter-menu-listbox" ),
form = listbox.jqmData( "filter-form" ),
listview = $( e.target );
// We store the generated form in a variable attached to the popup so we
// avoid creating a second form/input field when the listview is
// destroyed/rebuilt during a refresh.
if ( !form ) {
input = $( "<input data-type='search'></input>" );
form = $( "<form></form>" ).append( input );
input.textinput();
$( "#filter-menu-listbox" )
.prepend( form )
.jqmData( "filter-form", form );
}
// Instantiate a filterable widget on the newly created listview and
// indicate that the generated input is to be used for the filtering.
listview.filterable({ input: input });
})
// The custom select list may show up as either a popup or a dialog,
// depending how much vertical room there is on the screen. If it shows up
// as a dialog, then the form containing the filter input field must be
// transferred to the dialog so that the user can continue to use it for
// filtering list items.
//
// After the dialog is closed, the form containing the filter input is
// transferred back into the popup.
.on( "pagebeforeshow pagehide", "#filter-menu-dialog", function( e ) {
var form = $( "#filter-menu-listbox" ).jqmData( "filter-form" ),
placeInDialog = ( e.type === "pagebeforeshow" ),
destination = placeInDialog ? $( e.target ).find( ".ui-content" ) : $( "#filter-menu-listbox" );
form
.find( "input" )
// Turn off the "inset" option when the filter input is inside a dialog
// and turn it back on when it is placed back inside the popup, because
// it looks better that way.
.textinput( "option", "inset", !placeInDialog )
.end()
.prependTo( destination );
});
这并不难。我只更改了这一行：
.on( "listviewcreate", "#filter-menu-menu, #filter-menu2-menu", function( e ) {
这个更改的原因是选择框名称：#filter-menu和＃filter-menu2
#filter-menu --> #filter-menu-menu
#filter-menu2 --> #filter-menu2-menu
答案 1 :(得分：1)
我从你提到的jquery移动网站（http://demos.jquerymobile.com/1.4.2/selectmenu-custom-filter/）得到了这个代码，你只需要在html部分给出id，其他东西将由jquery mobile完成，我已经在3长列表中使用了它它的工作就像一个魅力，但问题是我无法将它与通过js动态生成的列表一起使用，我会在得到动态列表的解决方案后立即更新我的答案。
(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
// Upon creation of the select menu, we want to make use of the fact that the ID of the
// listview it generates starts with the ID of the select menu itself, plus the suffix "-menu".
// We retrieve the listview and insert a search input before it.
.on("selectmenucreate", ".filterable-select", function (event) {
var input,
selectmenu = $(event.target),
list = $("#" + selectmenu.attr("id") + "-menu"),
form = list.jqmData("filter-form");
// We store the generated form in a variable attached to the popup so we avoid creating a
// second form/input field when the listview is destroyed/rebuilt during a refresh.
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);
}
// Instantiate a filterable widget on the newly created selectmenu widget and indicate that
// the generated input form element is to be used for the filtering.
selectmenu
.filterable({
input: input,
children: "> option[value]"
})
// Rebuild the custom select menu's list items to reflect the results of the filtering
// done on the select menu.
.on("filterablefilter", function () {
selectmenu.selectmenu("refresh");
});
})
// The custom select list may show up as either a popup or a dialog, depending on how much
// vertical room there is on the screen. If it shows up as a dialog, then the form containing
// the filter input field must be transferred to the dialog so that the user can continue to
// use it for filtering list items.
.on("pagecontainerbeforeshow", function (event, data) {
var listview, form;
// We only handle the appearance of a dialog generated by a filterable selectmenu
if (!pageIsSelectmenuDialog(data.toPage)) {
return;
}
listview = data.toPage.find("ul");
form = listview.jqmData("filter-form");
// Attach a reference to the listview as a data item to the dialog, because during the
// pagecontainerhide handler below the selectmenu widget will already have returned the
// listview to the popup, so we won't be able to find it inside the dialog with a selector.
data.toPage.jqmData("listview", listview);
// Place the form before the listview in the dialog.
listview.before(form);
})
// After the dialog is closed, the form containing the filter input is returned to the popup.
.on("pagecontainerhide", function (event, data) {
var listview, form;
// We only handle the disappearance of a dialog generated by a filterable selectmenu
if (!pageIsSelectmenuDialog(data.prevPage)) {
return;
}
listview = data.prevPage.jqmData("listview"),
form = listview.jqmData("filter-form");
// Put the form back in the popup. It goes ahead of the listview.
listview.before(form);
});
})(jQuery);<form>
<div class="ui-field-contain" data-role="none" data-native-menu="false">
<select name="Language" id="Language" data-native-menu="false" class="filterable-select" data-force-dialog="true" data-filter="true" data-mini="true">
<option value="1">- Select1 - </option>
<option value="1">- Select1 - </option>
<option value="1">- Select1 - </option>
<option value="1">- Select1 - </option>
<option value="1">- Select1 - </option>
<option value="1">- Select1 - </option>
</select>
</div>
</form>
编辑： - 对于动态数据，我刚刚添加了$（＆＃39;＃IdOfSelectMenu＆＃39;）。selectmenu（）。selectmenu（＆＃39; refresh＆＃39;）;