What is the method to include personalized options values in select picker bootstrap code?

edit

To include personalized options values in a select picker with Bootstrap, you can follow these steps:

1. Add the select element to your HTML code, using the Bootstrap class "form-select" to style it as a select picker.

<select class="form-select" id="myselect">
</select>

1. Create an array with the personalized options you want to include. Each option should have a "value" attribute and a text content.

let myOptions = [
  { value: "option1", text: "Option 1" },
  { value: "option2", text: "Option 2" },
  { value: "option3", text: "Option 3" },
];

1. Use JavaScript code to populate the select picker with the personalized options. You can iterate over the array and create a new option element for each item, setting its value and content with the properties of the array items.

let select = document.getElementById("myselect");
myOptions.forEach(function(option) {
  let newOption = document.createElement("option");
  newOption.value = option.value;
  newOption.innerHTML = option.text;
  select.appendChild(newOption);
});

1. Run the JavaScript code when the page is loaded or some event is triggered, such as a button click or a form submission.

window.addEventListener("load", function() {
  let select = document.getElementById("myselect");
  myOptions.forEach(function(option) {
    let newOption = document.createElement("option");
    newOption.value = option.value;
    newOption.innerHTML = option.text;
    select.appendChild(newOption);
  });
});