1

我正在尝试使用 Greg Franko 的 SelectBoxIt。我希望隐藏选择框，直到用户单击“更多选项”，然后才会出现这些选择框。这就是问题所在。当Selectbox出现时，宽度都会缩小。但是，当我在“更多选项”图层打开的情况下加载页面时，选择框以正确的宽度显示。知道如何让选择框以正确的宽度出现吗？

<!doctype html>
    <html>
    <head>
      <meta charset=utf-8>
      <title>SelectBoxIt demo</title>
      <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" />
      <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />
      <link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
      <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.3.0/jquery.selectBoxIt.css" />
    </head>
    <body>
      <div id="btn_moreoptions2">MORE OPTIONS <img src="images/ic_arrow_down.gif" border="0"></div>
      <div id="moreoptions2"  style="display:none;">
        234
      <select name="test">
        <option value="SelectBoxIt is:">SelectBoxIt is:</option>
        <option value="a jQuery Plugin">a jQuery Plugin</option>
        <option value="a Select Box Replacement">a Select Box Replacement</option>
        <option value="a Stateful UI Widget">a Stateful UI Widget</option>
      </select>
      </div>

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.3.0/jquery.selectBoxIt.min.js"></script>
      <script>
        $(function() {
          $("#btn_moreoptions2").click(function(){
            $("#moreoptions2").slideToggle();

    });
          var selectBox = $("select").selectBoxIt();

        });
      </script>

    </body>
    </html>
4

1 回答 1

1

其他人也报告了这个问题：https ://github.com/gfranko/jquery.selectBoxIt.js/issues/149

以下是两种可能的解决方案：

  1. 当您使 SelectBoxIt 下拉菜单可见时，调用 SelectBoxItrefresh()方法来重建下拉菜单。由于元素现在可见，尺寸逻辑将正常工作。你可以看到它在这里工作

  2. 使用静态宽度（可以在 CSS 中设置）而不是依赖 SelectBoxIt 的动态自动宽度。要设置静态宽度，请将autoWidth选项设置为 false。像这样： $("select").selectBoxIt({ autoWidth: false }); 你可以看到它在这里工作。

于 2013-04-19T11:54:01.670 回答