html - lista - jquery mobile-establece los valores de selección/opción
lista desplegable jquery mobile (2)
estoy tratando de establecer valores de selección / opción usando jquery Mobile y parece que no puedo hacerlo funcionar.
<!-- Complete example below. -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile.css" />
<script type="text/javascript" src="jquery.mobile/jquery.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile.js"></script>
</head>
<body>
<div data-role="page" id="mainmenu">
<div data-role="header" data-position="inline">
<h1>Main Menu</h1>
</div>
<div class="ui-body ui-body-c">
<div data-role="content">
<div id=''placeholderA'' ></div>
<div id=''placeholderB'' ></div>
<div class="ui-block-b"><button type="submit" id="addPart" data-theme="a" data-icon="plus">Add Serial/Part</button></div>
</div>
</body>
</html>
<script>
var currentTab = "A";
// An XML fragment
testXML = "<?xml version=''1.0'' encoding=''UTF-8'' ?>/
<Doc>/
<DtlFields>/
<ACTC>B</ACTC>/
<QTY>5</QTY>/
</DtlFields>/
<DtlFields>/
<ACTC>A</ACTC>/
<QTY>6</QTY>/
</DtlFields>/
</Doc>";
// An HTML fragment
section = "<ul data-role=''listview'' data-theme=''a''>/
<li>PART: <span class=''thisSection''></span>/
<div data-role=''fieldcontain''>/
<label>A Label</label>/
<select name=''ACTC'' id=''preAction'' data-theme=''a''>/
<option value=''A''>A</option>/
<option value=''B''>B</option>/
<option value=''C''>C</option>/
</select>/
</div>/
</li>/
</ul>/
<!-- *** Quantity *** -->/
<div data-role=''fieldcontain''>/
<label>QTY</label>/
<input type=''range'' name=''QTY'' id=''preQuant01'' value=''1'' min=''1'' max=''10''/>/
</div>/
</div>";
$(document).ready(function () {
/* Add a listeners to ADD PART */
$(''#addPart'').click(function() {
var xml = $($.parseXML(testXML));
xml.find("DtlFields").each(function () {
var XMLString= $(this);
fnAddPart(XMLString);
});
return false;
});
// add a part section to a Group on screen
function fnAddPart(XMLString){
myTmpl = $(section);
if (XMLString != "" ){
// set Quantity - this works
var x =((XMLString).find("QTY").text());
myTmpl.find("input[name=''QTY'']").attr(''value'', x);
// ************ set Activity - but this does not work! ***************
var x =((XMLString).find("ACTC").text());
myTmpl.find("input[name=''ACTC'']").attr(''value'', x);
}
// append to page
myTmpl.appendTo("#placeholder"+currentTab).page();
}
});
</script>
Al manipular elementos mediante programación, como select campos de select en jQuery Mobile, una vez que haya realizado la selección pertinente, debe actualizar el elemento para que la interfaz de usuario se actualice. Aquí hay un fragmento de ejemplo que establece un valor en un campo de select y luego lo actualiza:
// Grab a select field
var el = $(''#YOUR_SELECT_FIELD'');
// Select the relevant option, de-select any others
el.val(''some value'').attr(''selected'', true).siblings(''option'').removeAttr(''selected'');
// jQM refresh
el.selectmenu("refresh", true);
Así que es la última línea que sospecho que necesitas.
En algunos casos, es posible que deba ajustar su función para ejecutar en document.ready e inicializar el menú de selección. Aquí está mi solución usando el ejemplo de Ben Poole:
$(document).ready(function(){
// Grab a select field
var el = $(''#YOUR_SELECT_FIELD'');
// Select the relevant option, de-select any others
el.val(''some value'').attr(''selected'', true).siblings(''option'').removeAttr(''selected'');
// Initialize the selectmenu
el.selectmenu();
// jQM refresh
el.selectmenu("refresh", true);
});