2011-08-15 163 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); 
}); 
相關問題