Jquery mobile JQM将选择图标更改为Notext

为了保持网站的响应性，我想在屏幕小于一定大小时，隐藏选择菜单中的文本。 我使用类似的方法删除按钮文本

function resizeBtn() {
    var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
    if ($(window).width() <= 490) {
        $("#opt_user_btn.ui-btn-icon-left", activePage).toggleClass("ui-btn-icon-notext ui-btn-icon-left");
         $( "#storeselect", activePage ).selectmenu( "option", "iconpos", "notext" );
    } else {
        $("#opt_user_btn.ui-btn-icon-notext", activePage).toggleClass("ui-btn-icon-left ui-btn-icon-notext");
        $( "#storeselect", activePage ).selectmenu( "option", "iconpos", "notext" );      
    }
}

html大致如下所示：

    <form><select name="storeselect" id="storeselect" data-native-menu="true" data-iconpos="left" onChange="this.form.submit();" >
<option value="1">1</option>
<option value="2">2</option>
</select>
</form>

---

我看过了，但还没弄明白。我们将不胜感激。谢谢

检查选择栏所选选项的文本位于范围标记中。一种解决方案是将不透明度为0的类添加到跨度中

<div id="storeselect-button" class="ui-btn ui-icon-carat-d ui-btn-icon-left ui-corner-all ui-shadow"><span>Option 1</span><select name="storeselect" id="storeselect" data-native-menu="true" data-iconpos="left">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select></div>

同时隐藏或设置图标样式的步骤

$("#storeselect").append('<style>.ui-btn-icon-left:after{opacity:0}</style>');

演示

要添加ui btn图标notext类，只需使用addClass并刷新选择菜单

 $(window).on('resize', function () {
    if ($(window).width() <= 490) {
     $("#storeselect").addClass("ui-btn-icon-notext")
         $('#storeselect').selectmenu('refresh', true);
            } else {
               $("#storeselect").removeClass("ui-btn-icon-notext")
               $('#storeselect').selectmenu('refresh', true);
            }
           });

演示

---

嗨，塔索斯，谢谢。这可能很有效，我已经尝试过JSFIDLE，我会在网站上尝试。然而，这并不完全是我的意思。我可能解释得不好。是否存在/如何使用类ui btn图标notext。如果我最初设置数据iconpos=notext，它会删除文本并减小按钮大小。我就是这么想的。文档上写着$.selector.selectmenu选项，左边是iconpos；但我还是没能让它工作。@devsie你是说中间的那个？？如果要从视图中删除，请添加$storeselect.append'.ui btn图标notext:after{opacity:0}'；-demo我想我需要像$storeselect.selectmenuoption、iconpos、notext这样的东西。我不确定该用什么替换该选项。@devsie我无法使用JQM选项使它像那样工作。我使用css创建了一个变通方法-

$("#storeselect").append('<style>.ui-btn-icon-left:after{opacity:0}</style>');

 $(window).on('resize', function () {
    if ($(window).width() <= 490) {
     $("#storeselect").addClass("ui-btn-icon-notext")
         $('#storeselect').selectmenu('refresh', true);
            } else {
               $("#storeselect").removeClass("ui-btn-icon-notext")
               $('#storeselect').selectmenu('refresh', true);
            }
           });