使用 onclick 按钮添加 boostrap 选择元素

问题描述 投票：0回答：1

我想使用按钮 onclick 使用引导类创建元素选择。元素插入到正文中，但在页面上不可见。 

<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>

如果直接放在 html 上，则所有样式都可见。

 <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>
javascript html bootstrap-4
1个回答
0
投票

正如 @CBroe 所说，我们通过 javascript 进行初始化，以便在动态添加元素时在元素上应用引导类函数。

<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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.