2011-08-15 38 views
18

đang cố gắng đặt giá trị lựa chọn/tùy chọn bằng cách sử dụng jquery Mobile và dường như không làm cho nó hoạt động.jquery mobile - đặt giá trị tùy chọn/chọn

<!-- 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>  

Trả lời

62

Khi lập trình thao tác các yếu tố như select trường trong jQuery Mobile, một khi bạn đã thực hiện các lựa chọn phù hợp, bạn cần phải làm mới phần tử sao cho giao diện người dùng được cập nhật. Dưới đây là một đoạn mã ví dụ mà lập một giá trị trong một lĩnh vực select, và sau đó cập nhật nó:

// 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); 

Vì vậy, nó là dòng cuối cùng tôi nghi ngờ bạn cần.

+0

'el.val ('some value')' không phải trả về phần tử 'select' chính nó chứ không phải tùy chọn? ít nhất đó là những gì nó làm cho tôi? – antitoxic

+0

Không: var el = $ ('# YOUR_SELECT_FIELD'); là nhóm với giá trị = "một số giá trị" – Sparkle

+0

(Bị lạm dụng bởi hai phiếu bầu cho điều này - cả hai trong cùng một ngày - khoảng ba năm sau sự kiện) . – Ben

6

Trong một số trường hợp, bạn có thể cần phải bọc hàm của mình để thực thi trên tài liệu.đơn và khởi tạo trình đơn selectmenu. Đây là giải pháp của tôi sử dụng ví dụ của 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); 
}); 
Các vấn đề liên quan