2011-08-15 162 views
18

正试图设置使用jQuery Mobile的选择/选项值,似乎无法让它工作。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>  

回答

62

当编程操作就像在jQuery Mobile的select领域的元素,一旦你做出相应的选择,你需要刷新的元素,使用户界面进行更新。下面是一个例子片断,其设置在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); 

因此这是最后一行,我怀疑你的需要。

+0

'el.val(“某个值”)'这不就是返回'select'元素本身,而不是一个选项?至少这对我来说是什么? – antitoxic

+0

否:var el = $('#YOUR_SELECT_FIELD');是内获得

+0

(这是因为两次反对 - 在同一天 - 事件发生后三年) 。 – Ben

6

在某些情况下,您可能需要将您的函数封装在document.ready上执行并初始化selectmenu。下面是一个使用本普尔例如我的解决方案:

$(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); 
}); 
相关问题