Html - add boostrap select element using button onclick

Premlatha
October 20, 2023
179 views
0 votes
2 Answers

I want to create element select with bootstrap class using button onclick. The element inserted into body, but not visible on page.

<html>
<head>
    <link rel="stylesheet" href="../bootstrap-4.6.2-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap-select-1.13.14/dist/css/bootstrap-select.min.css" />

    <script src="../jquery-3.7.1.min.js"></script>
    <script src="../popper.min.js" ></script><!--https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js-->
    <script src="../bootstrap-4.6.2-dist/js/bootstrap.min.js"></script>
    <script src="../bootstrap-select-1.13.14/dist/js/bootstrap-select.min.js"></script>
    <script>
        function addElement(){
            //normal
            document.body.innerHTML += '<select>'+
                                            '<option>Mustard</option>'+
                                            '<option>Ketchup</option>'+
                                        '</select>';
            //using boostrap class
            document.body.innerHTML+=    '<select class="selectpicker" multiple data-live-search="true">'+
                                            '<option>Mustard</option>'+
                                            '<option>Ketchup</option>'+
                                        '</select>';                    
        }
    </script>
</head>
<body>
    <button type="button" id="addRowBottom" onclick='addElement()'>add row</button>
</body>

if put directly on html, it is visible with all styling.

 <html>
    <head>
      <link rel="stylesheet" href="../bootstrap-4.6.2-dist/css/bootstrap.min.css">
      <link rel="stylesheet" href="../bootstrap-select-1.13.14/dist/css/bootstrap-select.min.css" />
      <script src="../jquery-3.7.1.min.js"></script>
      <script src="../popper.min.js" ></script><!--https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js-->
     <script src="../bootstrap-4.6.2-dist/js/bootstrap.min.js"></script>
     <script src="../bootstrap-select-1.13.14/dist/js/bootstrap-select.min.js"></script>
   </head>
   <body>
     <select class="selectpicker" multiple data-live-search="true">
       <option>Mustard</option>
       <option>Ketchup</option>
    </select>
  </body>

Answers

Chosen as BEST ANSWER

As told by @CBroe, we have initialize via javascript to apply bootstrap class function on element when add element dynamically.

<html>
  <head>
   <link rel="stylesheet" href="../bootstrap-4.6.2-dist/css/bootstrap.min.css">
   <link rel="stylesheet" href="../bootstrap-select-1.13.14/dist/css/bootstrap-select.min.css" />
   <script src="../jquery-3.7.1.min.js"></script>
   <script src="../popper.min.js" ></script><!--https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js-->
   <script src="../bootstrap-4.6.2-dist/js/bootstrap.min.js"></script>
   <script src="../bootstrap-select-1.13.14/dist/js/bootstrap-select.min.js"></script>
   <script>
     function addElement(){
        //normal
        document.body.innerHTML += '<select>'+
                                        '<option>Mustard</option>'+
                                        '<option>Ketchup</option>'+
                                    '</select>';
        //using boostrap class
        document.body.innerHTML+=    '<select class="selectpicker" multiple data-live-search="true">'+
                                        '<option>Mustard</option>'+
                                        '<option>Ketchup</option>'+
                                    '</select>';
         $('.selectpicker').selectpicker();                    
    }
</script>
 </head>
 <body>
    <button type="button" id="addRowBottom" onclick='addElement()'>add row</button>
 </body>
 </html>

(Edit)

Here is a way to create options from an array using parameters passed to the function to determine if that is added to the new <select> element.

I took the click off the button and put it in the code where it should be as a best practice.

Some notes and references at appropriate points in the code:

function addElement(newClass, hasMultiple, canSearchLive) {
  const optionValues = ["Mustard", "Ketchup", "Onions"];
  let selectList = document.createElement("select");
  if (hasMultiple) {
    selectList.multiple = "true";
  }
  if (canSearchLive) {
    selectList.dataset.liveSearch = "true";
  }
  selectList.classList.add(newClass);
  // ref: https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement/Option
  optionValues.forEach((element, key) => {
    selectList[key] = new Option(element);
  });
  // need an ID?
  //selectList.id = "hotdogstuff";//append number to make it unique
  document.body.appendChild(selectList);
  // now we turn it live!
  $('select.selectpicker').selectpicker();

}

document.getElementById("addRowBottom")
  .addEventListener('click', function(event) {
    const useSelectList = true;
    const newClass = useSelectList ? "selectpicker" : "form-control";
    const hasMultiple = false;
    const useLiveSearch = true;
    addElement(newClass, hasMultiple, useLiveSearch);
  });

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css" integrity="sha512-ARJR74swou2y0Q2V9k0GbzQ/5vJ2RBSoCWokg4zkfM29Fb3vZEQyv0iWBMW/yvKgyHSR/7D64pFMmU8nYmbRkg==" crossorigin="anonymous"
    referrerpolicy="no-referrer" />
  <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js" integrity="sha512-yDlE7vpGDP7o2eftkCiPZ+yuUyEcaBwoJoIhdXv71KZWugFqEphIS3PU60lEkFaz8RxaVsMpSvQxMBaKVwA5xg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

<body>
  <button type="button" id="addRowBottom">add row</button>
</body>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – add boostrap select element using button onclick

Answers