您好我使用JQM 1.3和JQuery 1.9.1 ...我尝试在没有解决方案的情况下使用动态选择菜单。
首先我在pagebeforeshow事件中创建一个带有createDocument(div ...)和.setAttribute(id,...)的selectmenu。然后我使用了很多变化的第一行,第二行和组合..
$("#select-keywords-list").selectmenu();
$("#select-keywords-list").selectmenu("refresh");
对我来说还没有任何效果..
在我添加它之后,我在Domready($(#page).ready)函数中听取它以进行更改事件。 在浏览器中它运行良好,但在手机上,我不能让它工作。希望有人可以帮助我。
我还尝试了原生菜单true和false ..
谢谢
mal
答案 0 :(得分:2)
工作示例:http://jsfiddle.net/Gajotres/dEXac/
$(document).on('pagebeforeshow', '#index', function(){
// Add a new select element
$('<select>').attr({'name':'select-choice-1','id':'select-choice-1','data-native-menu':'false'}).appendTo('[data-role="content"]');
$('<option>').html('Select option!').appendTo('#select-choice-1');
$('<option>').attr({'value':'1'}).html('Value 1').appendTo('#select-choice-1');
$('<option>').attr({'value':'2'}).html('Value 2').appendTo('#select-choice-1');
// Enhance new select element
$('select').selectmenu();
$(document).on('change', '#select-choice-1', function(){
alert($(this).find("option:selected").text());
});
});
还有一件事,不要使用jQuery Mobile准备好文档,它们不能正常工作。而是使用pageinit事件。如果您想了解更多信息,请点击此处: jQuery Mobile: document ready vs page events
答案 1 :(得分:0)
我知道使用模板引擎它可能更容易,但我尝试了这种方式
function renderItemsKeywords(results) {
var elementRoot = document.createDocumentFragment();
var elementDiv = document.createElement("div");
elementDiv.setAttribute("data-role", "fieldcontain");
var elementL = document.createElement("label");
elementL.setAttribute("for", "select-keywords-list");
elementL.setAttribute("class", "select");
elementL.appendChild(document.createTextNode("Wähle Eintrag:"));
var elementSel = document.createElement("select");
elementSel.setAttribute("name", "select-keywords-list");
elementSel.setAttribute("id", "select-keywords-list");
elementSel.setAttribute("data-native-menu", "true");
var elementOptD = document.createElement("option");
elementOptD.setAttribute("data-placeholder", "true");
elementOptD.appendChild(document.createTextNode("Wähle Eintrag"));
elementSel.appendChild(elementOptD);
var allKeywords = $().checkKeywords(results);
$.each(allKeywords, function(i, item) {
var elementOptAll = document.createElement("option");
elementOptAll.setAttribute("value", item);
elementOptAll.appendChild(document.createTextNode(item));
elementSel.appendChild(elementOptAll);
});
//alert(elementSel.length());
elementDiv.appendChild(elementL);
elementDiv.appendChild(elementSel);
var elementDivKey = document.createElement("div");
elementDivKey.setAttribute("id", "keylist");
elementRoot.appendChild(elementDiv);
elementRoot.appendChild(elementDivKey);
return elementRoot;
};
比其他部分
case 'keywords':
html = renderItemsKeywords(itemData);
$header.find("h1").html("Title");
$content.html(html);
$page.page();
$footer.find(":jqmData(role=navbar)").navbar();
$content.find(":jqmData(role=listview)").listview();
$("#select-keywords-list").selectmenu();
$("#select-keywords-list").selectmenu("refresh");
break;
}
$.mobile.changePage($(this));
希望你明白我在做什么