选项高度在显示后搞砸了

Question

这是我的选择框

<div id="paym" style="display: none;"><center><select id="payments2" name="payments2" style="width:90%; text-align: left;">
    <option value="" data-description="Exchange To">Processor</option>
    <?php
         $processor = $db->query("SELECT * FROM `processors`");
         while($pro = $processor->fetch_assoc()){
    ?>
           <option value="<?php echo $pro['id']; ?>" data-image="<?php echo $pro['icon']; ?>"><?php echo $pro['name']; ?></option>
    <?php
        }
    ?>
</select></center></div>

它填充了大约12个选项，而不是真正重要的选项。

然后我有function

$('#payments').on("change", function(){
        $('#paym').show();
 });

当第一个我的div payments更改时，它会显示我的新选择框，但是当您点击它时，它会超级小。见下图

但如果我关闭选项菜单并重新打开，则尺寸合适，请参见图片

所以基本上我想弄清楚的是如何在第一次使它成为合适的尺寸，而不是必须关闭盒子然后重新打开它。我已经尝试让我的height更大但除了创建空白区域之外什么也没做。

这是一个JS小提琴，用于创建选择框的所有内容，添加了外部源 http://jsfiddle.net/fLqym36j/1

Answer 1

尝试将第二个调用移动到事件处理程序中的msDropdown，如此

$(document).ready(function() {
  $('#payments').on("change", function(){
    $('#paym').show();
    $("#payments2").msDropdown({visibleRows:4});
  });
  $("#payments").msDropdown({visibleRows:4});
});

我不知道该脚本中发生了什么，但最初隐藏#paym的事实可能导致问题。

Here's the updated jsFiddle

请记住，这只是确保第二个下拉显示正确的一种方法。您要记住的是脚本应该在具有布局的元素上运行，例如，不隐藏或display: none;。这是否意味着在初始化之后隐藏下拉列表，或者在元素可见时初始化下拉列表或任何其他选项取决于您。