different selectize dropdown should have same dropdown option values while search

Question

There are two(or more) selectize dropdown where dropdown values (option values) are created by user. The issue is that two selectize should have same dropdown values when user creates some values in either of the two selectize dropdown. The dropdown values should be same and loads in other dropdown values irrespective of where they created(added).

Ref Link:- https://selectize.github.io/selectize.js/

Fiddle Link:- http://jsfiddle.net/1oy2d6e9/

html

<section class="demo" id="demo-single-item-select">
                <div class="header">
                    Single Item Select
                </div>
                <div class="sandbox">
                    <label for="select-beast">Beast:</label>
                    <select id="select-beast" class="demo-default" placeholder="create a person by typing...">
                    </select>
                    
                </div>
                         <div class="sandbox">
                    <label for="select-beast">Beast2:</label>
                    <select id="select-beast2" class="demo-default" placeholder="create a person by typing...">
                    </select>
                    
                </div>
   <div class="description">
                    These two select box have same values when values are created in either of the two.
                    <a href="https://selectize.github.io/selectize.js/">https://selectize.github.io/selectize.js/</a>
                </div>
</section>

js

var gArr = [];

// selectize should load all dropdown values ie in gArr initially;
     $('#select-beast2').selectize({
                        create: true,
                        sortField: 'text',
                        searchField: 'item',
                        create: function(input) {
                          gArr.push(input);  //<=======storing in global variable
                            return {
                                value: input,
                                text: input
                        }
    }
                    });
                    
                     $('#select-beast').selectize({
                        create: true,
                        sortField: 'text',
                        searchField: 'item',
                        create: function(input) {
                          gArr.push(input);  //<=======storing in global variable
                            return {
                                value: input,
                                text: input
                        }
    }
                    });

Swati · Accepted Answer · 2020-10-01 09:09:54Z

3

Under create function you can get the other select-box which you need to add option and then use addOption to add new option to that select-box .

Demo Code :

$('#select-beast2').selectize({
  create: true,
  sortField: 'text',
  searchField: 'item',
  create: function(input) {
    var selectize = $('#select-beast')[0].selectize; //get another slect box
    selectize.addOption({
      value: input,
      text: input
    }); //add option to it
   
    return {
      value: input,
      text: input
    }
  }
});

$('#select-beast').selectize({
  create: true,
  sortField: 'text',
  searchField: 'item',
  create: function(input) {
    var selectize = $('#select-beast2')[0].selectize; //get another slec box
    selectize.addOption({
      value: input,
      text: input
    }); //add option to it
   
    return {
      value: input,
      text: input
    }
  }
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.11.0/css/selectize.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.11.0/js/standalone/selectize.js"></script>
<section class="demo" id="demo-single-item-select">
  <div class="header">
    Single Item Select
  </div>
  <div class="sandbox">
    <label for="select-beast">Beast:</label>
    <select id="select-beast" class="demo-default" placeholder="create a person by typing...">
    </select>

  </div>
  <div class="sandbox">
    <label for="select-beast">Beast2:</label>
    <select id="select-beast2" class="demo-default" placeholder="create a person by typing...">
    </select>

  </div>
  <div class="description">
    These two select box have same values when values are created in either of the two.

  </div>
</section>

edited Oct 1, 2020 at 9:09

answered Oct 1, 2020 at 8:50

Swati

28.5k4 gold badges26 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Manzer A Over a year ago

Thanks, the selectize inputs are auto populating other selectize inputs. The other selectize user search input should not get populated, only the dropdown values should be updated in all.

Swati Over a year ago

remove selectize.addItem(input); line that should work .Updated code as well have a look.

Manzer A Over a year ago

Swati, if have 100 multiple selectize then var selectize = $('#select-beast2')[0].selectize; how this should be changed. Can there be generic solution.

Swati Over a year ago

Yes , you can loop through all selects using each loop and use $(this) instead of id .Here is sample code.

Collectives™ on Stack Overflow

different selectize dropdown should have same dropdown option values while search

html

js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

html

js

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related