jquery mobile-définir les valeurs select / option

essaye de définir les valeurs select/option en utilisant jQuery Mobile et ne semble pas pouvoir le faire fonctionner. 

<!-- 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>
18
demandé sur animuson 2011-08-15 05:28:01

2 réponses

lorsque vous manipulez par programmation des éléments comme les champs select dans jQuery Mobile, une fois que vous avez fait la sélection appropriée, vous devez rafraîchir l'élément de sorte que l'interface utilisateur est mise à jour. Voici un exemple d'extrait qui définit une valeur dans un champ select , puis le met à jour: 

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

donc c'est la dernière ligne dont je pense que vous avez besoin.

63
répondu Ben 2011-08-15 21:17:33

dans certains cas, vous pourriez avoir besoin d'envelopper votre fonction pour exécuter sur document.préparez et initialisez le selectmenu. Voici ma solution en utilisant L'exemple de 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);
});
6
répondu metaldog 2012-10-24 19:59:21