SelectBoxIt&隐藏的图层

时间:2013-04-19 05:31:16

标签: jquery

我正在尝试使用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>

1 个答案:

答案 0 :(得分:1)

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

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

  1. 当您使SelectBoxIt下拉列表可见时,请调用SelectBoxIt refresh()方法重建下拉列表。由于元素现在可见,因此尺寸逻辑将正常工作。您可以看到它正常工作here

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