2011-08-15 22 views
18

jquery मोबाइल का उपयोग करके चयन/विकल्प मान सेट करने का प्रयास कर रहा है और इसे काम नहीं कर रहा है।jquery मोबाइल - सेट का चयन करें/विकल्प मान

<!-- 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 मोबाइल में 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 ('कुछ मान') 'क्या यह' चयन 'तत्व को वापस नहीं लौटा रहा है, न कि विकल्प? कम से कम यह मेरे लिए क्या करता है? – antitoxic

+0

नहीं: var el = $ ('# YOUR_SELECT_FIELD'); के भीतर मूल्य = "कुछ मूल्य" – Sparkle

+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); 
}); 
संबंधित मुद्दे