jquery mobile - 设置选择/选项值

本文介绍了jquery mobile - 设置选择/选项值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述

  在jQuery Mobile中选择字段，一旦你做出了相关的选择，你需要刷新元素，以便更新用户界面。下面是一个示例代码片段，它在 select 字段中设置一个值，然后更新它： 
 
 
  //获取一个选择字段
 var el = $（'＃YOUR_SELECT_FIELD'）; 
 
 //选择相关选项，取消选择任何其他
 el.val（'some value'）。attr（'selected'，true）.siblings（'option'）。 removeAttr（ '选择'）; 
 
 // jQM刷新
 el.selectmenu（refresh，true）; 
  
所以这是我怀疑需要的最后一行。
 
am trying to set select/option values using jquery Mobile and can't seem to get it working.
<!-- 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>
 解决方案 
When programmatically manipulating elements like select fields in jQuery Mobile, once you've made the relevant selection, you need to refresh the element so that the user interface is updated. Here's an example snippet which sets a value in a select field, and then updates it:
// 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);
So it's that last line I suspect you need.
                        这篇关于jquery mobile  - 设置选择/选项值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！