Html jquery mobile - 设置选择/选项值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7060955/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery mobile - set select/option values
提问by bob
am trying to set select/option values using jquery Mobile and can't seem to get it working.
我正在尝试使用 jquery Mobile 设置选择/选项值，但似乎无法使其正常工作。
<!-- 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>
回答by Ben
When programmatically manipulating elements like selectfields 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 selectfield, and then updates it:
在以编程方式操作selectjQuery Mobile 中的字段等元素时，一旦做出相关选择，就需要刷新元素以更新用户界面。这是一个示例代码段，它在select字段中设置一个值，然后更新它：
// 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.
所以这是我怀疑你需要的最后一行。
回答by metaldog
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 上执行并初始化选择菜单。这是我使用 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);
});
