Menu
am trying to set select/option values using jquery Mobile and can't seem to get it working.
<!-- 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>
479
When programmatically manipulating elements like select fields in jQuery Mobile, once you've made the relevant selection, you need to refresh the element so that the user interface is updated. Here's an example snippet which sets a value in a select field, and then updates it:
// 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);
So it's that last line I suspect you need.
50
In some cases you might need to wrap your function to execute on document.ready and initialize the selectmenu. Here is my solution using Ben Poole's example:
$(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);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
