Nice select JS: Разместите список

Question

Для некоторых из наших элементов выпадающего списка с хорошим выбором мы хотели бы, чтобы они были элементами dropup, в манере говорить. Я пробовал играть в hocus-pocus JavaScript сам, чтобы заставить его работать, и googling, но пока не повезло. Отсутствие надлежащей документации также бесполезно.

Код для создания основной выберите элемент:

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

Код, который делает это «хорошо-выберите» элемент:

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

Вышеуказанные фрагменты работы, а также создать выпадающее меню, как так:

В основном, что делает Nice Select (для тех, кто не знаком с его практикой), делает div элемент с вложенным ul, основываясь на том, что имелось в исходном HTML DOM element. Впоследствии на них может повлиять JavaScript/jQuery/etc. если потребуется.

плагин можно найти здесь: http://hernansartorio.com/jquery-nice-select/

URL-адрес GitHub является: https://github.com/hernansartorio/jquery-nice-select

Я отсканировал обе страницы, но не нашел решения. Как показано на рисунке, список выбора ниже селектор, но мы хотим его выше it.

Вопрос в следующем: Есть ли простой трюк, чтобы сделать выпадающий выбор из nice-select капля вверх, или мне придется продолжить эксперименты с JavaScript, чтобы сделать это самостоятельно?

Answer 1

Таким образом, я создал этот фрагмент, чтобы обеспечить рабочую демонстрацию того, что вы пытаетесь сделать. Я взял части php, поскольку они являются излишними и просто мешают понять вашу проблему. Это Minimal, Complete, and Verifiable example. Надеюсь, вы увидите эту выгоду. Когда вы включаете хороший пример, ваш уровень ответов становится очень высоким.

Чтобы ответить на ваш вопрос - нет. Чтобы продемонстрировать себя, я загрузил выбор из 18 записей, чтобы увидеть, будет ли nice-select ограничивать высоту выпадающего списка - это не так. Затем я взглянул на исходный код и css для nice-select, в котором я не вижу упоминания о расчете позиции. Мне кажется, что div - выбор nice-select сразу же после выбора и относительно потока, а исходный выбор скрыт, что приводит к приятному внешнему виду, но не поддерживает управление высотой вниз или позиционирование.

Ваши варианты: - свяжитесь с разработчиком и запросите мод; - вилка источника и внесите свои изменения - используйте другой плагин, их много.

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();

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