Jquery selectBox不一样选择选项卡内的宽度

Question

我有多个不同形式的选项卡，我在这些选项卡中使用 Jquery selectBox 插件来替换选择。

问题在于选项卡或选择框插件以某种方式选项卡 css display:block;更改 selectBox 插件宽度，并且不同选项卡中的两个相同选择具有不同的宽度，宽度差异非常小，但在漂亮的形式下看起来很糟糕。

这是有问题的演示：http://jsfiddle.net/kvdKr/1/

有人知道如何解决这个问题吗？谢谢

更新：

通过使用 $("select").selectBox('destroy'); 解决了这个问题在打开和使用选项卡之前 $("select").selectBox();再次，这解决了问题。更多详情：https://github.com/claviska/jquery-selectBox/issues/11

Answer 1

所以虽然我不知道直接的问题是什么，但这是造成问题的原因：

    <div class="box"> <!-- I took the visible out of the class, if you only do this it will fix your problem, your select boxes will be the same width -->
    <select id="amount" name="amount">
        <option value="select">Amount</option>
        <option value="1">500</option>
    </select>
</div>

<div class="box">
    <select id="amount" name="amount">
        <option value="select">Amount</option>
        <option value="1">500</option>
    </select>
</div>

然后我在你的 .ready 函数中添加了这一行：

$(document).ready(function(){
   $("select").selectBox();
   $('div.box').first().addClass('box visible');// <== So now I forced your box visible class on .ready and it works like a dream
});

这是一种解决方法，我承认，但它的代码并不多，而且它有效；）