x13454 / bootstrap-selectsplitter Goto Github PK

The order of the options is not the same of the original select...

For example, change the example code with

<div class="container">
    <div class="row">
        <div class="col-xs-12" style="padding-top:40px;">
            <select data-selectsplitter-selector>
              <optgroup label="Category 1">
                <option value="5">Choice 1</option>
                <option value="3">Choice 2</option>
                <option value="2">Choice 3</option>
                <option value="4">Choice 4</option>
              </optgroup>
              <optgroup label="Category 2">
                <option value="5">Choice 5</option>
                <option value="6">Choice 6</option>
                <option value="7">Choice 7</option>
                <option value="8">Choice 8</option>
              </optgroup>
              <optgroup label="Category 3">
                <option value="5">Choice 9</option>
                <option value="6">Choice 10</option>
                <option value="7">Choice 11</option>
                <option value="8">Choice 12</option>
              </optgroup>
            </select>
        </div>
    </div>
</div>

and the options shown when you click on Category 1, are Choice 3, Choice 2, Choice 4, Choice 1 (in this order), instead Choice 1, Choice 2, Choice 3 and Choice 4

just like in the other issue "order is not maintained" for the option value's... which is fixed... The order of optgroup label is not the same as how it it specified in html... sorts in asc

Any chance to select multiple values? so if we select two on left side this will show both selected values on right side, please advice.

How can I open third selector?

This is exactly what I want.
My data is two level select that is exactly this component does.

But, It looks so simple and can't be applied any style to it.
It always appears in two vertical boxes, not in two columns. Even, I added either col-md-6 or col-lg-6 in javascript file.
Beside, I found that this plug-in http://rickardn.github.io/listgroup.js/ would make it looked better.
So I add class='list-group' inside your javascript.
Unfortunately, it's still not working.

I would appreciate if you kindly provide more way to customize your wonderful component here. 👍
Cheers.

Hi,
We found a situation in which bootstrap-selectsplitter is not rendering both lists well if we have the following scenario:

• the select input has only one optgroup with only one option

You can easily reproduce this using your online demo here: http://jsfiddle.net/ae7fxdyy/
Just remove Category 2 and 3 groups and leave Category 1 with only "choice 1"

... or just check in this edited jsfiddle: http://jsfiddle.net/lopezcjf/nff30xtv/

Instead of the normal behavior, both are shown as dropdown lists and the right one has no selectable option

Regards
Javier

when I use your code, there is problem with more splitters on same page ...

I'm using template METRONIC .. and they solved it:
http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/bootstrap-selectsplitter/bootstrap-selectsplitter.js

try to update your code ...

Hi,

Love this plugin!! Great work :)

I have an issue where I handle the "change" events of the selected item and pass the val of the select to an ajax method.

If I click on each option (going down the list, right select box) then click the previous option the val is lost, i.e. not passed as a "change" event.

Here is my jQuery code to handle the "change" event and pass the selected val to a get request:

    $(function(){
      $("select#select_selectsplitter").change(function(){
        $.get("/proc/ajax.php",{select_id:$(this).val()}, function(ajaxRes){
          $("div#displayData").html(ajaxRes);
        });
      });
    });

Any thoughts on this? If I use a vanilla select with optgroups the val isn't lost, so its seems the issue is with selectsplitter :(

Cheers,

Jay

Wrong parent is selected on load if the optgroup label of the selected element is contained in the label of another optgroup.

For example: "Category" and "Category 3"

Link to reproduce the bug: https://jsfiddle.net/waybn4zp/

hello ... try to update script and change:

self.$element.find('option[value=' + self.currentChildCategory + ']').attr('selected', 'selected');

to:

self.$element.find('option[value="' + self.currentChildCategory + "']').attr('selected', 'selected');

this should by changed in updateParentCategory and updateChildCategory