javascript - 搜索时不同的选择下拉列表应具有相同的下拉选项值

Question

有两个(或更多)选择下拉列表，其中下拉值(选项值)由用户创建。问题是，当用户在两个选择下拉列表中的任何一个中创建某些值时，两个选择应该具有相同的下拉列表值。下拉列表值应该相同，并且加载到其他下拉列表值中，无论它们在哪里创建(添加)。

引用链接:- https://selectize.github.io/selectize.js/

fiddle 链接:- 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
                        }
    }
                    });

Answer 1

在create函数下，您可以获取需要添加选项的另一个选择框，然后使用addOption向该选择框添加新选项。

演示代码:

$('#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>