javascript - Nice select JS: Drop up the list - Stack Overflow

admin管理员组

文章数量:1427281

For some of our nice-select dropdown elements, we'd like them to be dropup elements, in a manner of speaking. I've tried dabbling in the hocus-pocus of JavaScript myself to get it to work, and googling, but no luck so far. The lack of proper documentation is also unhelpful.

The code to create the basic select element:

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

The code that makes it a 'nice-select' element:

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

The above snippets work, and create a dropdown like so:

Basically what Nice Select does (for those whom are unfamiliar with its practises) is make a div element with a nested ul, based on what was present in the original HTML select DOM element. These can then later on be influenced by JavaScript/jQuery/etc. if need be.

The plugin can be found here: /

The GitHUB URL is:

I've scanned both pages, but found no solution. As as shown in the image, the selection list is below the selector, but we want it above it.

So the question is: Is there an easy trick to make the selection dropdown from nice-select drop upwards, or am I going to have to continue with JavaScript experimentation to do it myself?

For some of our nice-select dropdown elements, we'd like them to be dropup elements, in a manner of speaking. I've tried dabbling in the hocus-pocus of JavaScript myself to get it to work, and googling, but no luck so far. The lack of proper documentation is also unhelpful.

The code to create the basic select element:

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

The code that makes it a 'nice-select' element:

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

The above snippets work, and create a dropdown like so:

Basically what Nice Select does (for those whom are unfamiliar with its practises) is make a div element with a nested ul, based on what was present in the original HTML select DOM element. These can then later on be influenced by JavaScript/jQuery/etc. if need be.

The plugin can be found here: http://hernansartorio./jquery-nice-select/

The GitHUB URL is: https://github./hernansartorio/jquery-nice-select

I've scanned both pages, but found no solution. As as shown in the image, the selection list is below the selector, but we want it above it.

So the question is: Is there an easy trick to make the selection dropdown from nice-select drop upwards, or am I going to have to continue with JavaScript experimentation to do it myself?

• javascript
• jquery
• drop-down-menu

Share Improve this question Follow edited Feb 8, 2017 at 9:07 Zubaja asked Feb 7, 2017 at 13:36 ZubajaZubaja 26155 silver badges2020 bronze badges 4

• 1 Not really possible to answer as you don't give anything to look at or reference wherever the nice-select code originates. Do yourself a favour and post a minimal working example of what you are doing and explain what you want it to do instead. – Vanquished Wombat Commented Feb 7, 2017 at 13:44
• 1 Fair point. I was under the impression making a nice-select element was easy enough to understand without aid of any code. Code has thusly been added to acpany my description and question. – Zubaja Commented Feb 7, 2017 at 15:49
• 1 Please don't take this the wrong way - its purely in aid of getting you an answer with the least friction in the shortest time. You sound like a pro - think what questions you would ask as background and context setters, then make sure you head those off in the way you present your question. For example - a link to the nice-select site, a functioning code snippet in your question, and explanation of what you want, what you tried and what is not working. Then we're cooking on gas. – Vanquished Wombat Commented Feb 7, 2017 at 16:02
• 1 Appologies for the late reply. I've updated the question with a visual, references to where the plugin can be found, and stated my question a bit better. – Zubaja Commented Feb 8, 2017 at 9:09

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

If anyone else still has this problem add the following to your css file where the nice select drop box is

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

Since the nice select list's positioning is absolute, this css offsets the entire div from the button rather than the top

So I created this snippet to provide a working demonstration of what you are trying to do. I took the php parts out as they are kind of superfluous and just get in the way of understanding your issue. This is a Minimal, Complete, and Verifiable example. I hope you can see the benefit. When you include a good example your answer rate gets really high.

To answer your question - no. To demonstrate to myself I loaded up the select with 18 entries to see if nice-select would limit the height of the dropdown - it did not. I then took a look at the source code and css for nice-select wherein I can see no mention of position calculation. It looks to me like the div the nice-select uses is positioned immediately after the select and relative to the flow, and the original select is hidden, resulting in a nice appearance, but not catering for dropdown height control or positioning.

Your options are: - contact the developer and request a mod; - fork the source and make your own modifications - use another plugin, there are many.

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.js"></script>
<link href="https://cdnjs.cloudflare./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>

本文标签： javascriptNice select JS Drop up the listStack Overflow