Jquery 移动选择菜单 - 如何扩展小部件以将 <span> 添加到增强的 html

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 &nbsp; which we write as &#160; to be XHTML compliant - see gh-6699
            span.html( "&#160;" );
        }

        // 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 附加到您的 select 小部件的 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

Jquery 移动选择菜单 - 如何扩展小部件以将 <span> 添加到增强的 html

Jquery Mobile selectmenu - How to extend widget to add a <span> to the enhanced html

jquery

jquery-ui

jquery-mobile