jquery mobile - 设置选择/选项值 [英] jquery mobile - set select/option values
本文介绍了jquery mobile - 设置选择/选项值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< p>< p> ！ - 下面的完整示例。 - >
<！DOCTYPE html>
< html>
< head>
< link rel =stylesheethref =jquery.mobile/jquery.mobile.css/>
< script type =text / javascriptsrc =jquery.mobile/jquery.js>< / script>
< script type =text / javascriptsrc =jquery.mobile/jquery.mobile.js>< / script>
< / head>
< body>
< div data-role =pageid =mainmenu>
< div data-role =headerdata-position =inline>
< h1>主菜单< / 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 =submitid =addPartdata-theme =adata-icon =plus>部分< /按钮>< / DIV>
< / div>
< / body>
< / html>
< script>
var currentTab =A;
// XML片段
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>;
// HTML片段
section =< ul data-role ='listview'data-theme ='a'> \
< li> PART ：< span class ='thisSection'>< / span> \
< div data-role ='fieldcontain'> \
< 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> \
< / div> \
< / li> \
< / ul> \
<！ - ***数量*** - > \
< div data-role ='fieldcontain'> \
< label> QTY< / label> \
< input type ='range'name ='QTY'id ='preQuant01'value ='1'min ='1'max = '10'/> \
< / div> \
< / div>;
$ b $（文档）.ready（函数（）{
/ *添加一个监听器给ADD PART * /
$（'＃addPart '）.click（function（）{
var xml = $（$。parseXML（testXML））;
xml.find（DtlFields）。each（function（）{
var XMLString = $（this）;
fnAddPart（XMLString）;
}）;
return false;
}）;
//添加一个零件节到
函数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 doe （***************）
var x =（（XMLString）.find（ACTC）。text（））;
myTmpl.find（input [name ='ACTC']）。attr（'value'，x）;
$ b //追加到页面
myTmpl.appendTo（＃placeholder+ currentTab）.page（）;
}
}）;
< / script>
解决方案
在jQuery Mobile中选择字段，一旦你做出了相关的选择，你需要刷新元素，以便更新用户界面。下面是一个示例代码片段，它在 select 字段中设置一个值，然后更新它：
//获取一个选择字段
var el = $（'＃YOUR_SELECT_FIELD'）;
//选择相关选项，取消选择任何其他
el.val（'some value'）。attr（'selected'，true）.siblings（'option'）。 removeAttr（ '选择'）;
// jQM刷新
el.selectmenu（refresh，true）;
所以这是我怀疑需要的最后一行。
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>
解决方案
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.
这篇关于jquery mobile - 设置选择/选项值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
