How do I change the value of tail.select?

user_10443279 0
Viewed 2613

Sorry for my english:)

How can I select values from tail.select (Link to GitHub) using JS, I tried changing the value from select, but it doesn't help.

I wanted to select values: aaabs, aa, bvbb.

I read the documentation, but I couldn't figure it out.

var items = [
  {key: '11', value: 'aaabs', description: ""},
  {key: '21', value: 'aa', description: ""},
  {key: '31', value: 'bssss', description: ""},
  {key: '41', value: 'bdsss', description: ""},
  {key: '51', value: 'abbb', description: ""},
  {key: '61', value: 'aaa', description: ""},
  {key: '71', value: 'bvbb', description: ""}
];

tail.select("select", {
  animate: true,
  classNames: null,
  csvOutput: false,
  csvSeparator: ",",
  descriptions: false,
  deselect: false,
  disabled: false,                // NEW IN 0.5.0height: 300,
  width: 250,
  hideDisabled: false,
  hideSelected: false,
  items: items,
  locale: "en",                   // NEW IN 0.5.0
  multiple: true,
  multiLimit: Infinity,           // UPDATE IN 0.5.0
  multiPinSelected: true,        // NEW IN 0.5.0
  multiContainer: false,          // UPDATE IN 0.5.0
  multiShowCount: true,
  multiShowLimit: true,           // NEW IN 0.5.0
  multiSelectAll: true,
  multiSelectGroup: false,
  openAbove: null,
  placeholder: 'Select your choice...',
  search: true,
  searchFocus: true,
  searchMarked: true,
  sortItems: false,
  sortGroups: false,
  sourceBind: false,              // NEW IN 0.5.0
  sourceHide: true,               // NEW IN 0.5.0
  startOpen: true,
  stayOpen: false,                // UPDATED IN 0.5.0
  cbComplete: undefined,          // NEW IN 0.5.0
  cbEmpty: undefined,             // NEW IN 0.5.0
  cbLoopItem: undefined,
  cbLoopGroup: undefined
});
    
function test() {
  $(".tail-select-2").value = "aaabs, aa, bvbb"; //This code doesn't work.
}
<link href="https://cdn.jsdelivr.net/npm/tail.select@0.5.2/css/tail.select-default.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/tail.select@0.5.2/js/tail.select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<select class="tail-select-2" multiple></select>
<button onclick="test()">Change values</button>

javascript
2 Answers

you can use handle function to select or unselect options hundle method

.handle(state, key, group, _force) This method will change the state (first argument) on the passed option. Use "select", "unselect", "enable" or "disable" as first parameter to "set" the respective state. The fourth argument forces / skips the "don't unselect an option on single select fields, which aren't deselectable" condition.

var items = [
  {key: '11', value: 'aaabs', description: ""},
  {key: '21', value: 'aa', description: ""},
  {key: '31', value: 'bssss', description: ""},
  {key: '41', value: 'bdsss', description: ""},
  {key: '51', value: 'abbb', description: ""},
  {key: '61', value: 'aaa', description: ""},
  {key: '71', value: 'bvbb', description: ""}
];
 

var select =tail.select("select", {
  animate: true,
  classNames: null,
  csvOutput: false,
  csvSeparator: ",",
  descriptions: false,
  deselect: false,
  disabled: false,                // NEW IN 0.5.0height: 300,
  width: 250,
  hideDisabled: false,
  hideSelected: false,
  items: items,
  locale: "en",                   // NEW IN 0.5.0
  multiple: true,
  multiLimit: Infinity,           // UPDATE IN 0.5.0
  multiPinSelected: true,        // NEW IN 0.5.0
  multiContainer: false,          // UPDATE IN 0.5.0
  multiShowCount: true,
  multiShowLimit: true,           // NEW IN 0.5.0
  multiSelectAll: true,
  multiSelectGroup: false,
  openAbove: null,
  placeholder: 'Select your choice...',
  search: true,
  searchFocus: true,
  searchMarked: true,
  sortItems: false,
  sortGroups: false,
  sourceBind: false,              // NEW IN 0.5.0
  sourceHide: true,               // NEW IN 0.5.0
  startOpen: true,
  stayOpen: false,                // UPDATED IN 0.5.0
  cbComplete: undefined,          // NEW IN 0.5.0
  cbEmpty: undefined,             // NEW IN 0.5.0
  cbLoopItem: undefined,
  cbLoopGroup: undefined
});
    
function test() {
 select.options.handle("select", 0 , "#") 
 select.options.handle("select", 1 , "#") 
 select.options.handle("select", 6 , "#") 
 //take look
 // console.log(select.options);

}
<link href="https://cdn.jsdelivr.net/npm/tail.select@0.5.2/css/tail.select-default.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/tail.select@0.5.2/js/tail.select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<select class="tail-select-2" multiple></select>
<button onclick="test()">Change values</button>

user_112588660

I would like to note a change for the tail.select library. The old repository is gone completely and the new version is here -

https://github.com/wolffe/tail.select.js

Also, the demo is available here -

https://getbutterfly.com/tail-select/

Since the plugin has disappeared, a few months ago, I have updated it to version 0.5.20 and an ES6 version 0.6 is in the works. I am maintaining this plugin/library full time.

user_29879300
Related