Question 245322 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Tom-Select Parent-Child 2 level example

Can someone help me find an example of using Tom-Select, two level, where we have a child-parent relationship in the data?

I search any example of using two select using Tom-Select, where we have a child-parent relationship

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I wrote some code that works. I'm not a javascript developer, so I'm asking for help in improving this code.

    const select2 = new TomSelect('#select2',{
    maxItems: 1,
  controlInput: null,
    valueField: 'id',
    labelField: 'title',
    options: [
    ],
    create: false
});
let select2_data = [
  {"id":1, "parent_id":1, "title":"Mac Book"},
  {"id":2, "parent_id":1, "title":"iPhone"},
  {"id":3, "parent_id":1, "title":"Apple Watch"},
  {"id":4, "parent_id":2, "title":"Gmail"},
  {"id":5, "parent_id":2, "title":"Google Maps"},
  {"id":6, "parent_id":2, "title":"YouTube"},
  {"id":7, "parent_id":3, "title":"yahoo mail"},
  {"id":8, "parent_id":3, "title":"yahoo finance"},
];
const select1 = new TomSelect('#select1',{
    valueField: 'id',
    labelField: 'title',
  searchField: 'title',
    options: [
        {id: 1, title: 'Apple'},
        {id: 2, title: 'Google'},
        {id: 3, title: 'Yahoo'},
    ],  
});

select1.on('change', function() {
  const selectedValues = parseInt(select1.getValue());
  select2.clear();
  select2.clearOptions();  
  select2.addOption(filteredArray(select2_data, "parent_id", selectedValues));
});

function filteredArray(arr, key, value) {
  const newArray = [];
  for(i=0, l=arr.length; i<l; i++) {
    if(arr[i][key] === value) {
      newArray.push(arr[i]);
    }
  }
 return newArray;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tom-Select Two-Level Example</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tom-select.complete.min.js"></script>
</head>
<body>
    <select id="select1"></select>
    <select id="select2"></select>
</body>
</html>


  2. 0

    Based on your question, this example might help you understand how to use two-tier with optgroup. Otherwise, be more specific in your question.

    // Initialize Tom-Select on the select box
const select = new TomSelect('#select-box');

// You can customize Tom-Select options and behavior as needed here

// Listen for changes in the select box
select.on('change', function() {
    // Handle the selected values
    const selectedValues = select.getValue();
    console.log(selectedValues);
});
   
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tom-Select Two-Level Example</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tom-select.complete.min.js"></script>
</head>
<body>
    <select id="select-box">
        <optgroup label="Parent 1">
            <option value="child1_1">Child 1.1</option>
            <option value="child1_2">Child 1.2</option>
        </optgroup>
        <optgroup label="Parent 2">
            <option value="child2_1">Child 2.1</option>
            <option value="child2_2">Child 2.2</option>
        </optgroup>
    </select>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search