Plugins Select option with search not working on appended option-CodePudding

Does anyone know how to use select option with search but the option is appended. the plugins that I've tried cant read the appended option. Does anyone know how? Please help. thanks. Plugins i've tried are tom-select / seletize / chosen.

    const mealOrder = document.getElementById("orderMeal")

    mealOrder.addEventListener('change', function(){
      switch (this.value) {
      
        case "1":
             $("#appendOption").empty();
            $("#appendOption").append(`<option>Hot Dog, Fries and a Soda</option>` 
                              `<option>Burger, Shake and a Smile</option>` 
                              `<option>Sugar, Spice and all things nice</option>`);
          break;
          
        case "2":
           $("#appendOption").empty();
            $("#appendOption").append(`<option>Pizza, Popcorn, Burger</option>` 
                              `<option>Burger, Chicken Wings, Soda</option>` 
                              `<option>Random</option>`);
          break;
          
        case "3":
             $("#appendOption").empty();
             $("#appendOption").append(`<option>Soup. Carbonara, Coke</option>` 
                              `<option>Chocolate Cheese Cake, Coffee</option>` 
                              `<option>Random</option>`);
          break;
           case "0":
             $("#appendOption").empty();
             $("#appendOption").append(`<option>Select</option>`);
             break;
      }
    })

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <select  id="orderMeal">
            <option value="0">Select</option>
            <option value="1">Combo Meal 1</option>
            <option value="2">Combo Meal 2</option>
            <option value="3">Combo Meal 3</option>
     </select>
     <select id="appendOption">
      <option value="0">Select</option>
     </select>

CodePudding user response：

You have to destroy and re-initialize the TomSelect to have the select updated.

Ps: Alternatives to this approach, TomSelect API Docs offers various options. You can use removeItem() function instead, then add them back based on the condition. In my humble opinion, I think this is a better approach than the way you're currently clear/append the option tags

const mealOrder = document.getElementById("orderMeal")

// Initialize TomSelect and refer the instance to a variable
let mealTomSelect = new TomSelect("#appendOption", {
  sortField: {
    field: "text",
    direction: "asc"
  }
});

mealOrder.addEventListener('change', function() {
  // you have to destroy the TomSelect instance first
  mealTomSelect.destroy();

  switch (this.value) {
    case "1":
      $("#appendOption").empty();
      $("#appendOption").append(`<option>Hot Dog, Fries and a Soda</option>`  
        `<option>Burger, Shake and a Smile</option>`  
        `<option>Sugar, Spice and all things nice</option>`);
      break;

    case "2":
      $("#appendOption").empty();
      $("#appendOption").append(`<option>Pizza, Popcorn, Burger</option>`  
        `<option>Burger, Chicken Wings, Soda</option>`  
        `<option>Random</option>`);
      break;

    case "3":
      $("#appendOption").empty();
      $("#appendOption").append(`<option>Soup. Carbonara, Coke</option>`  
        `<option>Chocolate Cheese Cake, Coffee</option>`  
        `<option>Random</option>`);
      break;
    case "0":
      $("#appendOption").empty();
      $("#appendOption").append(`<option>Select</option>`);
      break;
  }

  // Then re-initialize it
  mealTomSelect = new TomSelect("#appendOption", {
    sortField: {
      field: "text",
      direction: "asc"
    }
  });

})

.ts-wrapper .ts-control .item {
  color: red;
}

.ts-wrapper .ts-dropdown .option {
  color: blue;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tom-select.complete.min.js"></script>
<select  id="orderMeal">
  <option value="0">Select</option>
  <option value="1">Combo Meal 1</option>
  <option value="2">Combo Meal 2</option>
  <option value="3">Combo Meal 3</option>
</select>
<select id="appendOption">
  <option value="0">Select</option>
</select>