2011-08-15 8 views
18

으로 설정하면 jquery Mobile을 사용하여 선택/옵션 값을 설정하려고하는데 작동하지 않는 것 같습니다. 프로그래밍 jQuery를 모바일에서 select 필드와 같은 요소를 조작 할 때 관련 선택을하고 나면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

는, 당신은 사용자 인터페이스가 업데이트되도록 요소를 새로 고침 할 필요가있다. 여기 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 ('some value')'는 이것이 선택 요소가 아니라 선택 항목을 반환하는 것이 아닌가? 적어도 그것이 나를 위해 무엇을 하는가? – antitoxic

+0

아니요 : var el = $ ('# YOUR_SELECT_FIELD'); 의 값이 "some value"가 – Sparkle

+0

6

경우에 따라 document.ready에서 실행할 함수를 래핑하고 selectmenu를 초기화해야 할 수도 있습니다. 벤 풀 (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); 
});