不错的选择JS：放下列表

Question

对于我们的一些精选的下拉元素，我们希望它们是一种说话方式的dropup元素。我已经尝试过自己专注于JavaScript的重点工作，并开始使用谷歌搜索，但到目前为止还没有运气。缺乏适当的文件也没有用。

创建基本选择元素的代码：

<select name="payment_type" class="small payment_type" id="payment_type">
    <option value=""><?php echo _t('Select a payment type') ?> </option>
    <?php 
        $payment_btn = false;
        if(count($payment_types) > 0){
            $payment_btn = true;
            foreach($payment_types as $payment_type){ ?>
                <option class="paymentMethod" value="<?php echo $payment_type['id']; ?>" id="payment_type_<?php echo $payment_type['id']; ?>" rel="<?php echo $payment_type['id']; ?>" /><?php echo $payment_type['type']; ?> </option>
        <?php } 
    } ?>
</select>

使其成为一个很好的选择的代码＆＃39;元素：

$('#payment_type').niceSelect();

以上代码段工作，并创建一个下拉列表，如下所示：

基本上，Nice Select所做的（对于那些不熟悉其实践的人）是基于原始内容中的内容，使用嵌套 ul 制作 div 元素。 HTML 选择 DOM元素。这些可以在以后受到JavaScript / jQuery / etc的影响。如果需要的话。

该插件可在此处找到：http://hernansartorio.com/jquery-nice-select/

GitHUB网址为：https://github.com/hernansartorio/jquery-nice-select

我已经扫描了两个页面，但没有找到解决方案。如图所示，选择列表位于选择器下方，但我们希望位于之上。

所以问题是： 是否有一个简单的技巧可以让选择下拉从精选 - 向下滴，或者我将不得不继续进行JavaScript实验来自己做？

Answer 1

因此，我创建了此代码段，以提供您正在尝试执行的操作演示。我把php部分拿出来，因为它们是多余的，只是妨碍了解你的问题。这是Minimal, Complete, and Verifiable example。我希望你能看到好处。当你提供一个很好的例子时，答案率会非常高。

回答你的问题 - 不。为了向自己演示，我加载了包含18个条目的select，以查看nice-select是否会限制下拉列表的高度 - 它没有。然后，我看了一下源代码和css for nice-select，其中我看不到位置计算。它看起来像div一样，精选的使用位于选择和相对于流之后，原始选择被隐藏，导致外观漂亮，但不适合下拉高度控制或定位。

您的选择是： - 联系开发人员并请求mod; - 分叉源并进行自己的修改 - 使用另一个插件，有很多。

＆＃13;

＆＃13;

var payment_data = [
   {  id: 1, type: "Visa"},
 {  id: 2, type: 'Mastercard'},
 {  id: 3, type: 'Cash'},
 {  id: 1, type: "Visa2"},
 {  id: 2,  type: 'Mastercard2'},
 {  id: 1,  type: "Visa3"},
 {  id: 2,  type: 'Mastercard3'},
 {  id: 1,  type: "Visa4"},
 {  id: 2,  type: 'Mastercard4'},
 {  id: 1,  type: "Visa5"},
 {  id: 2,  type: 'Mastercard5'},
 {  id: 1,  type: "Visa6"},
 {  id: 2,  type: 'Mastercard6'},
 {  id: 1,  type: "Visa7"},
 {  id: 2,  type: 'Mastercard7'},
 {  id: 1,  type: "Visa8"},
 {  id: 2,  type: 'Mastercard8'}
]
  
  for (var i = 0; i < payment_data.length; i = i + 1) {

  var option = $('<option class="paymentMethod" value="' + payment_data[i].type + '" id="payment_type_' + payment_data[i].id + '" rel="payment_type_' + payment_data[i].id + '">' + payment_data[i].type + "</option>")
  option.appendTo($("#payment_type"))

}

$('#payment_type').niceSelect();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/css/nice-select.css" rel="stylesheet" />



<select name="payment_type" class="small payment_type" id="payment_type">
  <option data-display="Select">Nothing</option>
</select>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果其他任何人仍然有此问题，请将以下内容添加到您的css文件中，其中的尼斯选择下拉框为

.list {
  top: auto !important;
  bottom: 100%;
}

由于精美选择列表的位置是绝对的，因此此CSS使整个div从按钮而不是顶部偏移