Jquery Mobile selectmenu - 如何扩展小部件以将<span>添加到增强的html </span>

Question

在jquery移动应用程序中，我想为以下目的编辑select元素的增强html

到

为此，我编辑了jquery移动基本文件。

    setButtonText: function() {
    var self = this,
        selected = this.selected(),
        text = this.placeholder,
        phText = this.title,
        span = $( document.createElement( "span" ) );
        spanNew = $( document.createElement( "span" ) );




this.button.children( "span" ).not( ".ui-li-count, .pc" ).remove().end().end().prepend( (function() {
        if ( selected.length ) {
            text = selected.map(function() {
                return $( this ).text();
            }).get().join( ", " );
        } else {
            text = self.placeholder;
        }

        if ( text ) {
            span.text( text );
        } else {

            // Set the contents to   which we write as   to be XHTML compliant - see gh-6699
            span.html( " " );
        }

        // TODO possibly aggregate multiple select option classes
        return span
            .addClass("sb")
            .addClass( self.select.attr( "class" ) )
            .addClass( selected.attr( "class" ) )
            .removeClass( "ui-screen-hidden" );
    })()); 
    var selVal = selected.map(function() {
                return $( this ).val();
            }).get().join( ", " );

    // to add additional span i have included the following code   

    if ( selected.length && selVal != "") {
        this.button.children( "span" ).not( ".ui-li-count, .sb" ).remove().end().end().prepend( (function() {   

            spanNew.html(self.select.attr('title'));
            // TODO possibly aggregate multiple select option classes
            return spanNew
                .addClass("pc") 
                .addClass( self.select.attr( "class" ) )
                .addClass( selected.attr( "class" ) )
                .removeClass( "ui-screen-hidden" );
        })());  
    }else{
        this.button.children( ".pc" ).remove();
    }


},

我知道编辑基本文件并不好。所以任何人都可以帮助我将这个逻辑移出jquery移动基础文件。

任何帮助将不胜感激

Answer 1

您可以更新元素your_select-button的内容（JQuery Mobile将-button附加到您选择的小部件的ID）：

<强> HTML

<div data-role="page" id="page">
    <select id="your_select" data-native-menu="false" data-inline="true">
    <option value="1st">Option 1</option>
    <option value="2nd">Option 2</option>
    <option value="3rd">Option 3</option>
    </select>
</div>

<强>的JavaScript

function UpdateSelect()
{
    var value = $("#your_select").val();
    var html = '<h5 style="margin:0">Selected Option is</h5><h4 style="margin:0">The ' + value + ' option</h4>';
    $("#your_select-button").html(html);
}

$(document).on("pageshow","#page", function()
{
    UpdateSelect();

    $(document).on("change", "#your_select", function()
    {
        UpdateSelect();
    });
});

<强> JSFiddle