lcdsantos / jquery-selectric Goto Github PK

There is page with at least two selectbox.

1. Open first selectbox
2. Select option
3. Open second selectbox
4. Open first selectbox again
5. Select another option
6. Try to open second selectbox: first click has no effect
7. Only after second click second selectbox opened.

p.s. Thanks for awesome plugin!

GIF Demo (185 KB):

You can see this in action by just visiting the demo page. While using Chrome or Safari on a Mac.

Click on any dropdown.
Instead of using the mouse to click a choice use the up or down arrow key.

First issue: The dropdown for the select element become visible on the page. Not the styled dropdown. The one for the actual element the styled one replaces.

Second issue: When you make a selection you can no longer tab out of the select box. You have to press the enter key or click somewhere else on the page.

Clicking enter will make the select element dropdown dissapear, but your selection will not be updated in the Selectric dropdown. If you press enter a second time it will update.

Clicking somewhere else on the page will update the Selectric dropdown, but not with you choice. It will instead always choose the next closest option.

Screenshot attached.

This plugin seems really nice and straightforward, but i would need the possibility also to add images in any list element, like for example adding a class. There is any demo or recommendation to achieve that?

Thanks

Hey, can you tell me is it possible to force the options list to show under the select box, and never above?

Hi Leonardo,

I started trying your plugin, actually just to style the drop down :) However, I need to know how to select a value manually using Jquery.

As this information is missing in the documentation, I just ask here.

Thanks for your work.
Kai

... when selecting an option, if the select is also used optgroup to wrap the options.

I have temporarily fixed it so:
$(selector).find("optgroup option").unwrap();
$(selector).selectric();

Many thanks for this really useful plugin lcdsantos!

Allow for a default select option in the list by adding the "selected" keyword to the tag. Or perhaps adding a class to the option tag. Currently the default is the first option.

When enabling Selectric for mobile devices, the device's soft keyboard opens after clicking on a selectric select box. The is undesirable behavior. Is there a way to prevent the keyboard from popping up?
Thanks

Hi !

Your plugin is great !
It's too bad that we can only apply it to the <select> element.

What if we could use it with whatever we want ?

<ul class="selectric-list">
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
    <li>Sit</li>
    <li>Amet</li>
</ul>

or

<div class="selectric-list">
    <div>Lorem</div>
    <div>Ipsum</div>
    <div>Dolor</div>
    <div>Sit</div>
    <div>Amet</div>
</div>

and

$(function(){
    $('.selectric-list').selectric();
});

The plugin doesn't support the <optgroup> tag. So something 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>

produces an empty select box.

Hi. May I know when this plugin supports iPad? Right now the plugin does not seem to work in IOS devices.

On regular selects, when the user hits the select key, it selects the item. With selectric, the enter is passed down to the form. It would be nice to have that work in selectric too.

Hi,

I am building Joomla template and getting following error:

Uncaught SyntaxError: Invalid regular expression: /[function (){for(var b=this.length,
a=Array(b);b--;)a[b]=q(this[b]);return a}]/: Range out of order in character class

I am using jquery 1.10.2, no other javascript libs included.

What could be wrong?

Plugin allows to select disabled options, when you open the list, click on the disabled option, then click back on the select wrapper to close it.
I think it's because too quick assignment of "selected=index" in condition in _select(index, close) method near line 419. Changing the selected value to index after checking if index option is not disabled seems to solve the problem.

When clicking e.g. back and forth between two (or more) selects, selectric events stop to react to single clicks (e.g. to open or close). A repeated click is needed onward to trigger these events.

A page reload restores the first-click behavior again.

Visible also on official demos http://lcdsantos.github.io/jQuery-Selectric/ .

No JS errors reported.

Hello! How dropdown can be cofigured to expand only downwards.
P.S. I don't know whether it's proper place to post this question.

eg: I have dropdown which is hidden and it is only activated when I click on links.
So I use selectric on page load and it is not calculating the width of selectricItems correctly coz it is hidden. Can you please look into it and provide fix

hey
is it possible to trigger the dropdown with onHover?

First of all, thanks for the awesome plugin!

A tiny bug: after opening a dropdown, if you type to highlight a certain item and then click outside the dropdown (instead of pressing Enter), the found option will still be highlighted when the dropdown is opened again. The expected behaviour would be that the actual current selected item is then marked as selected.

Steps to reproduce:

• open "Change options on the fly" dropdown demo
• type "a"
• click outside the dropdown
• open the dropdown again (Apples will be marked as selected: should be Strawberries)

Thanks!

Everytime you do a 'refresh' the original select gets wrapped with another 'selectricHideSelect' div, over and over again. Should be checked if it's already 'wrapped' ;-)

The example showing icons is nice but hardcoded 6 images - this is not realistic.
I have the following code as an example:
B64.');background-repeat:no-repeat;background-position:right;background-size:16px auto;" value="'.$c->CountryId.'" data-apply='.$c->ApplyTax.' data-pricegroup='.$c->DefaultPriceGroup; if($c->CountryId == $actualcountry) { echo ' selected'; } echo '>'.$c->CountryName.''; } ?> which generates me the 200 or so countries of the world together with their flags. Of course, this works, who wonders, only in Firefox and I am looking for a solution to replace the standard select. What do you think about?

Any recommendations? I've tried using jQuery-Validation-Engine here:
https://github.com/posabsolute/jQuery-Validation-Engine

and this:

https://github.com/jzaefferer/jquery-validation

Though it looks like since selectric "converts" the drop down list to an unordered list, anything that is trying to validate the form input in real time is going to fail.

Should I just go with a custom post-submit validator?

Thanks!

I was trying to hook onto the change event, do some actions and reset the value like so:

$('select').on('selectric-change', function(e){
    //... do some other stuff
    $(this).val("").selectric('refresh');
});

this causes an issue since the label is not updated until after the change hook completes.

$original
    .prop('selectedIndex', currValue = selected)
    .data('value', text);

_utils.triggerCallback('Change', _this);

// Change label text
$label.html(text);

I think changing the label should be called before triggering the event like so:

$original
    .prop('selectedIndex', currValue = selected)
    .data('value', text);

// Change label text
$label.html(text);

_utils.triggerCallback('Change', _this);

Thanks!
~Greg

Hi! Nice plugin. Is the "Hover" event going to be supported sometime soon? Thanks

Hello,
is it possible to get the current reference-object within the onChange-event?

Like:

<select name="test1" class="test">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
<select name="test2" class="test">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>

$(".test").selectric({
    onChange: function(){
        alert( $(this).val() );
    }
});

Thank you

Step:

1. $('#dynamic').prop('disabled', 'disabled');
2. $('#dynamic').selectric('refresh');
3. $('#dynamic').prop('disabled', false);
4. $('#dynamic').selectric('refresh');

After that, the navigation on the keyboard does not work, search, too

If tabindex is not specified on forms, everything seems to work as expected. However, if we set tabindex on the form items, the selectric dropdowns are ignored and won't focus until the end of the tab "flow". Make sense?

The callback functions onOpen and onClose should provide the reference object for the select-element as parameter.

eg:

$('select').selectric({
onOpen: function ( theReferenceObjectForSelect) {
});

It's about this line: https://github.com/lcdsantos/jQuery-Selectric/blob/master/dist/jquery.selectric.js#L207

Replaced classnames taken from original element. That causes error then using with libraries with class declarative (e.g. angular.js)

The over problem is using pluginName instead of _this.options.customClass for prefix

$original.prop('class').replace(/\S+/g, pluginName + '-$&')

There can be an option for this action enable by default.
ps. sorry for bad english.

When using jQuery validation engine must remove class .validation[required] from .selectricWrapper.

jQuery('.selectricWrapper').each(function() {
jQuery(this).removeClass('validate[required]');
});

https://github.com/posabsolute/jQuery-Validation-Engine

Thanxx for fixing :-)

has no effect in mobile web browser

see http://jsfiddle.net/7YeQy/

the selectric box does not take the width property of the initial selectbox, but it's own width defined in selectric styles. I took off the width property of the selectric style and that's OK if
the defined width is 100%, just as selectricResponsive.

This behavior causes me some problems, as on different pages I may have selectboxes of different widths, maybe one with fixed width of 150px, one other with 200px and so on.

If I declare a this is ignored. How can I solve it?

Only on IE8, no problem on IE7. :)

After change options on the fly, and do refresh(), hover class do not add, because

$outerWrapper.removeClass(_this.classes.disabled).hover(function(){
     $(this).toggleClass(_this.classes.hover);
});

run two times. After the third refresh - hover OK. After the fourth again bug.

It seems that the selectric plugin also affects normal input fields.

We have some legacy code that removes the value from an input. This works fine without selectric, but not with it:

$('.form_field_text, .form_field_textarea').focus(function() {
    if (this.value == this.defaultValue){  
            this.value = '';  
    }  
});

And this is the selectric call:

$(document).ready(function(){
    $('.form-wrap select').selectric(); 
});

The HTML is this:

<div class="form-field ">
            <input type="text" value="PHONE" title="PHONE" id="Phone" name="Phone" class="required valid">
        </div>

Any idea why this would happen?

Everytime a validation is ran on Angular, the class name of the select element changes. For example, if the select is required, angular adds the class ng-invalid ng-invalid-required. Selectric only appends the initial class list, so if the method inside _init could be decoupled from it, and could be called from outside (like what happens with selectric('refresh')), would account for this, or even include this on the refresh call, would be easier to have all the mutation in one go.

HTML Example Selectric + Angular 1.3:

<div class="selectricWrapper selectric-form-control selectric-ng-pristine selectric-ng-untouched selectric-ng-valid selectric-ng-valid-required">
  <div class="selectricHideSelect">
     <select required="" ng-options="s.value as s.text for s in user.data.sexo" class="form-control ng-untouched ng-dirty ng-valid-parse ng-invalid ng-invalid-required" id="billing:sexo" selectric="" ng-model="user.data.models.sexo" tabindex="0">
        <option value="" class="">Selecione</option><option value="0">Masculino</option>
        <option value="1" selected="selected">Feminino</option>
     </select>
  </div>
  <div class="selectric">
     <p class="label">Selecione</p><b class="button">▾</b>
   </div>
   <div class="selectricItems" tabindex="-1" style="width: 220px;">
      <div class="selectricScroll">
        <ul>
            <li class="selected">Selecione</li>
            <li class="">Masculino</li>
            <li class="last">Feminino</li>
        </ul>
     </div>
   </div>
    <input class="selectricInput" tabindex="0"></div>

I have this case where I couldn't scroll up the list, set the height and overflow to .selectricScroll solved my problem.

.selectricScroll {
  height: 300px;
  overflow: scroll;
}

Instead of one long div that displays a scrollbar, I would like to have 7 elements down plus to the right 7 more elements.

Can this be achieved with the recent version v1.6.7 of selectric?

Hi, thanks for this great plugin.

Hope you don't mind, but I added an option that I wanted to share with you.

expandToItemText: true

}, options);

and then

// Calculate options box height
// Set a temporary class on the hidden parent of the element
visibleParent.addClass(tempClass);

// Set the dimensions, minimum is wrapper width, expand for long items if option is true
if ((!options.expandToItemText) || ($wrapper.outerWidth() - (options.border * 2) > $items.outerWidth()))
$items.width($wrapper.outerWidth() - (options.border * 2)).height() > maxHeight && $items.height(maxHeight);
else {
// make sure the scrollbar width is included
$items.css({ 'overflow-y': 'scroll' });
$items.width($items.outerWidth()).height() > maxHeight && $items.height(maxHeight);
// set scroll bar to auto
$items.css({ 'overflow-y': 'auto' });
}

// Remove the temporary class
visibleParent.removeClass(tempClass);

not sure if you care for this feature, but add it if you do :)

Hello,
We have just add jQuery Selectric to twittstrap resources list
http://www.twittstrap.com/resources/details/jquery-selectric
Under : Forms
Regards

After fix #46, hover effect still not work properly:
http://jsfiddle.net/f7cyf7k9/

I recorded demo with changed hover color to red (GIF 145KB):

This lines https://github.com/lcdsantos/jQuery-Selectric/blob/master/src/jquery.selectric.js#L179-L181 make a persistent event leak that keeps adding the same mouseenter and mouseout over and over inside angular. it's best to treat it like other elements, and give it a bindSufix, using on instead of hover, so the events can be detached.

http://plnkr.co/edit/n9GS0hECnIu2rrYYbu4d?p=preview

Check the events attached to .selectricWrapper, there should be just one. So to make sure it doesn't create leaks, always call off(bindSufix) to the element before attaching the same event name to it

EDIT: This actually stands true for all events that are bound inside _populate(), they should be off()ed. since Angular reuses elements, the events keep pilling until the UI starts to feel sluggish

For some reason I can't get it to work with Magento. I get a syntax error on line 33 of jquery.selectric.js

SyntaxError: unmatched ) in regular expression
...s = s.toLowerCase().replace(RegExp('[' + d[k] + ']', 'g'), 'aeiouncy'.charAt(k))

Any ideas?
I have declared it this way:

$j(function(){
$j('select').selectric();
});

having a
var $j = jQuery.noConflict();
right after jquery load.

When I choose the mode openOnHover:true, I must wait 500ms before the select will be closed.
(line 202 https://github.com/lcdsantos/jQuery-Selectric/blob/master/src/jquery.selectric.js#L202)

How can i change this settings to close instantly the select ?

Thanks,

When you use the keyboard to navigate through the options in a drop-down, when you come to the end of the list and click the down arrow, the default behavior is to start over from the top. Is there any way to disable this functionality so that going to the end of the list is a "hard stop" so to speak? This more closely matches the native browser behavior for keyboard navigation in drop-downs.

Hi again,

Hope you don't mind, I just another feature I would like to share, its just another behaviour which is disabled items.
I use a placeholder which has attributes disabled="disabled" and selected="selected". also, any disabled item cannot be clicked.

selectItems[i] = {
value: $(elm).val(),
text: selectText,
slug: _replaceDiacritics(selectText),
disabled: ($(elm).attr('disabled')?true:false)
};
_$li += '

and the css

.selectricItems li.disabled { background: #F0F0F0; color: #888; }
.selectricItems li.selected { background: #EFEFEF; color: #000; border-top-color: #E0E0E0; }
.selectricItems li.hover:hover { background: #F0F0F0; color: #000; }

and disabled the click

function _select(index, close) {
// element is disabled, cant click it
if (selectItems[index].disabled) return;

not sure this is the best of implementations, but it works, again if you care for it by all means add it.

Thanks again for this nifty plugin :)

When I put into ‘option‘ tag the string containing HTML entities they are processed by browser. See the exaple screenshot:
http://kartinka.vtramvae.ru/7e48b8a19d407aeb2ed4e23ccab6.png

HTML code:

Hello,

I'm new to angular and would like to customize with my selects.
Tried many things, have no idea how to past the values to angular.
The style is working, just can't transmit the value of the selected item to angular.