html - style - mobile jquery animation




jquery mobile-선택/옵션 값 설정 (2)

jquery Mobile을 사용하여 select / option 값을 설정하려고하는데 작동하지 않는 것 같습니다.

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

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

그래서 네가 필요로하는 마지막 줄이야.


경우에 따라 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);
});




html-select