hernansartorio / jquery-nice-select Goto Github PK

Contradictions found

• package.json LICENCE - ISC
• bower.json LICENCE - MIT

It's a typo or is it so?

these things are working in native select. Can you make your select to work the same?

Line 34:

(display ? ' data-display="' + display : '') + '"' + should be (display ? ' data-display="' + display + '"' : '') +

Hello Herman, really nice work! I have a doubt, you will have support for multiple select?? that will be really awesome!

Regards

To reproduce: wrap the selectbox to be styled with a <label> tag.
Why: because clicking nice select bubbles to the label tag, which in turn triggers click with event.target set to the native select element, so the plugin treats it like "clicking outside".

Both on mobile phones and in a resized browser window nice select becomes un-clickable and therefore can't be used on screen sizes smaller than 768px

Thanks for great plugin. when a page is loaded via Ajax the select elements doesn't turn to nice select .it seems niceSelect() function does not work on ajax loaded pages

Hi,

Great lib!!
How can we add the possibility to show images in the newly created dropdown? I was thinking about using something like data-imgsrc=some-image.png which will be added as image in the dropdown.

Any pointers or help appreciated :)

Could be really nice

Please add search option in the select tag. If it already exists please guide me to get it done.

could not pass a value through a post form. We made improvements :
after line 82:

                .addClass('option' +
                    ($option.is(':selected') ? ' selected' : '') +
                    ($option.is(':disabled') ? ' disabled' : '')).html($option.text()));
/// add link for dom element Option
        $dropdown.find('ul li:last').get(0).niceSelectItem = $option.get(0);

onClick event
after line 121:

 $option.addClass('selected');
/// correct selected Option element on Select tag
 $option.get(0).niceSelectItem.selected=true;

and after line 150 and line 162:

$next.addClass('focus');
$next.get(0).niceSelectItem.selected=true;

$prev.addClass('focus');
$prev.get(0).niceSelectItem.selected=true;

Unable to select those options whose values are number & start with zeros as $option.data('value') tries to convert given value to number & trims the leading zeros. $option.attr('data-value') can be used instead.

After use webpack and vue.js show this error, please resolve this problem. More about this problem on Stackoverflow.

Hi, I am a contributor from cdnjs. We would like to host this library on our server, but we can't host it without a consistent license. Would you please confirm which license this library used. Thank you.

• MIT license from bower.json
• ISC license from package.json

issues on cdnjs
cdnjs/cdnjs/issues/9592
cdnjs/cdnjs/pull/10330

I have a problem, when using Nice Select, during animation, all texts on the page are getting blurred. I noticed that on the jQuery Nice Select demo page there's no that issue. Ho to overcome this?

Just doesn't display the list. Class "open" can't be added to select.

Is there a way to get a callback function once a selected value has been checked?

as a required field?

Hi! if its possible - can you integrate RequireJS support in core?

JQuery nice select is good when we not using any framework. But can we make it with Backbone library.
eg:
events: {
'click .btn-clear-event': 'resetFilter'
'click .btn-event-register': 'eventTracker'
'change .selectList': 'eventFilter'
}

however its not working for me.

Hi I have to disable my dropdown on click of checkbox how to implement the same in nice select

Please, make less files to the nice select) Thank you very much)

The value of readonly select elements should not be modified.

Currently, nice-select displays the selected value, not the value set readonly.

Hi All,
I want to reset dropdown list. I can able to reset "" list but not "nice-select" list. Can you please help me? Here is the code. $('.clearItem').on('click', function(e){ e.preventDefault(); $('.event-list li').removeClass('hide'); $('.select-events-filter option').prop('selected', function() { return this.defaultSelected; }); e.stopPropagation(); }); // $('.clearItem') is a button

Instead of rendered as arrows, it looks like this:

BTW, it's an awesome plugin! Light-weight, slick, and works almost anywhere!

Would be great if the IE9 arrow issue can be fixed.

I have a select list at the bottom of my page and use the jquery-nice-select plugin to make it look nicer. When I open the nice select list it makes my page longer, instead of (like normal select boxes would) being shown on top (see attched screenshot).

Is it possible to mimic the behaviour of the default select list?

Thanks

There is no scroll inside nice-select. On overflow scroll bar appears in body.

I can't set a style to solve this.Any ideas?

Hi.
How i can use this lib in angular js ? any directive?
Thanks.

I had to add this code in css to fix the issue when the field is short, and the content is big, clipping the words. Hope this helps other people.

.current { display: block; overflow: hidden; }

Hello , my friend , wonderful script . Congratulation .
I have a question , I am trying to change the value with the jquery , like this -

$(document).on('click', '.edit-item', function(event){
$("#myselect").val(1);
}

or
$(document).on('click', '.edit-item', function(event){
$('#myselect>option:eq(3)').prop('selected', true);
}

but is not changing , maybe has some script that has to tell the jquery to refresh , after on click .
Do you know what do I have to do to make it works ?
Thanks

I have a select menu containing items like :

 <select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select> 

but only options are displaying in list and no optgroup label is showing

There is a tiny bug in code, line 14:

(select.attr('disabled') ? 'disabled' : '" tabindex="0') +

it should be:

(select.attr('disabled') ? ' disabled' : '" tabindex="0') +

A space is needed before 'disabled' (same as before tabindex), currently it appends 'disabled' to last class name and it's not working right.

Hello,
I've large items in list. it did not focus current selected on open list.

I was having an issue where if I had a field with large amount of choices (i.e. - State or Country Field), there was no scrollbar and the list overflowed outside of the div. I fixed this by setting:

.nice-select .list { max-height: 300px; overflow: scroll; }

Using:

$("#selectorTest").val(value);

On a <select> element does not update the currently selected option.

Using

console.log($("#selectorTest").val())

Logs the expected value.

Refreshing the page will update the <select> to the set option.

Standard <select> elements will update their selected option immediately when using jQuery.val()

I'm using nice-select in a richfaces based jsf application.
Everything works fine.
But after any ajax request and partial re-rendering of the page, next subsequent call to nice select will fail with error:
jQuery(...).find(...).niceSelect is not a function.
Because of this error i'm not able to continue operation.

When native select has a "multiple" attribute, the user is allowed to select more than one item.
Currently this is not the case in nice-select

Hello,

on line 62 you wrote:
.attr('tabindex', $select.attr('disabled') ? null : '0')

but if the original select element has a "tabindex" attribute, it returns to zero. So, I try this:
.attr('tabindex', $select.attr('disabled') ? null : $select.attr('tabindex') || '')
and it works.

Would you consider adding "displayed but not selectable" for select items? More specifically, display an item in a select list, but user can't select it.

This is useful to inform user that some item is present, but not available for choice. Alternatively, one can simply hide such an item, but sometimes users can be confused as to where particular items are.

Is it possible to make it work in IE 8? Basic functionality at least.

Regards,
Raman

So I'm basically reading out the options from a text file and then nice select orders them alphabetically although I need the exact order from my file. Does anybody know how to prevent this sorting?

HI I am havin trouble using this with npm..I did:

npm i jquery-nice-select --save

in my js file:
require('jquery-nice-select');
$('probes-select').niceSelect();

but I get the err that niceselect is not defined.

Hi, can you add information about license? Is it open source or not?

Hello,

I've seen that the plugin supports tabindex and keyboard selection, but it would be nice to add a class when the nice-select is focused with tabindex.

If you agree, I can make a pull request.

Thank you.

Firstly, I'm using this cool plugin in most of my projects. Thank you a lot for it!

It would be great to make disabled select elements grey or something.

I think I could try to implement it by myself. I can create a pull-request with my changes. Is it interesting for you? It would be really nice for me to participate

It is not showing dropdown menu when used with jQuery 3.1.1

Hi there !
First, thanks for the awesome plugin.

Here's what i try to achieve :

• change the display value (attribute data-name) depending the filter count
• for example, if more than 3 selected items, use attribute data-short-name

I was able to do this with the PHP side, means it work on refresh as i count the number of selected items. But I want to make it work on select, the JS way.

Maybe I can use #25 as inspiration ?

In the end, changing on the fly NiceSelect settings to use another attribute, or be able to change data-name value and refresh NiceSelect ?
Thanks a lot

This plugin works visually, but fails in complying with many a11y requirements. For example a user that navigates primarily by keyboard will have to press down 180 times to select Uganda. In order to get this plugin at minimum ADA / ARIA compliance, please implement the following:

• typeahead navigation
• aria-* attributes for better form navigation and screen reader support

Reading the code, the select MUST be before the div
I use (no choice) a form validation plugin that writes error messages just after the element so in this case, between the select and the div which breaks the layout: label ; hidden select ; error message ; displayed dropdown

isn't there another way to get the origin select from the niceselect instance so that div and select would not have to be in a specific order anymore?
like adding a kind of "data-niceselect-id" random string