Question

我正在尝试使用Greg Franko的SelectBoxIt。我希望隐藏选择框，直到用户点击“更多选项”，然后会出现这些选择框。这是问题所在。当选择框出现时，宽度全部缩小。但是，当我加载打开“更多选项”图层的页面时，选择框以正确的宽度显示。任何想法如何让选择框以正确的宽度显示？

<!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>

Answer 1

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

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

当您使SelectBoxIt下拉列表可见时，请调用SelectBoxIt refresh()方法重建下拉列表。由于元素现在可见，因此尺寸逻辑将正常工作。您可以看到它正常工作here
使用静态宽度（可以在CSS中设置）而不是依赖SelectBoxIt的动态自动宽度。要设置静态宽度，请将autoWidth选项设置为false。像这样： $("select").selectBoxIt({ autoWidth: false });您可以看到它正常工作here。

SelectBoxIt＆amp;隐藏的图层

1 个答案: