Bootstrap - 如何在 JavaScript 中动态添加<select class=“form-control”

Bootstrap - How to add <select class="form-control"> dynamically in JavaScript?

本文关键字：select class form-control 添加 JavaScript 动态 Bootstrap      更新时间：2023-09-26

我正在学习Bootstrap和jQuery。我对他们两个都很陌生。

我想生成标签<select class="form-control">通过 JavaScript 代码动态化。

我的JavaScript中有以下代码：

var response = originalRequest.responseXML;
var property = document.createElement("select");
property.id = "predicate(" + addprop.level + "," + addprop.count + ")";
property[property.length] = new Option("Properties", "");
var options = response.getElementsByTagName('option');

根据我所读到的内容，document.createElement("select")动态创建选择标签。

我的问题是，如何使用 Bootstrap 样式（即使用 class="form-control"）制作动态生成的选择标签？

我希望下拉菜单通过jQuery/JavaScript动态生成（即不使用HTML/JSP文件中的select标签。

你可以做这样的事情： 

property.className = "form-control";

满：

var response = originalRequest.responseXML;
var property = document.createElement("select");
property.className = "form-control";
property.id = "predicate(" + addprop.level + "," + addprop.count + ")";
property[property.length] = new Option("Properties", "");
var options = response.getElementsByTagName('option');

更多关于MDN的信息在这里。

您可以使用 $（'element'） 创建任何文档元素然后使用 .append（element） 将元素放到目标父级...试试我的代码，如果它有效

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
  <form role="form">
    <div class="form-group" id="div">
<!-- begin snippet: js hide: false -->

      <label>Select</label>
    </div>
  </form>
<script>
  $(document).ready(function(){
    var select = $('<select class="form-control"></select>');
    var option = $('<option value="foo">Foo</option');
    select.append(option);
    $("#div").append(select);
  }); 
</script>
</body>
</html>

通常我会创建新内容，例如https://jsfiddle.net/Ljdxnwot/5/我写这样的文字

var txt="<select class'form-contro'>"+
"</select>";

您可以使用 $（'element'） 创建任何文档元素然后使用 .append（element） 将元素放到目标父级...试试我的代码，如果它有效

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
  <form role="form">
    <div class="form-group" id="div">
      <label>Select</label>
    </div>
  </form>
<script>
  $(document).ready(function(){
    var select = $('<select class="form-control"></select>');
    var option = $('<option value="foo">Foo</option>');
    select.append(option);
    $("#div").append(select);
  }); 
</script>
</body>
</html>

      <label>Select</label>
    </div>
  </form>
<script>
  $(document).ready(function(){
    var select = $('<select class="form-control"></select>');
    var option = $('<option value="foo">Foo</option');
    select.append(option);
    $("#div").append(select);
  }); 
</script>
</body>
</html>
相关文章：