我尝试使用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>
解决方法
当在jQuery 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);
所以这是我怀疑你需要的最后一行。