Question

我正在学习Bootstrap和jQuery。我对他们两个都很陌生。如果我问的问题不在于术语，请耐心等待。我想生成标签＆lt; select class =＆＃34; form-control＆＃34;＆gt; 动态地通过JavaScript代码。我在JavaScript中有以下代码： var response = originalRequest.responseXML; var property = document.createElement（＆＃34; select＆＃34;）; property.id =＆＃34;谓词（＆＃34; + addprop.level +＆＃34;，＆＃34; + addprop.count +＆＃34;）＆＃34 ;; property [property.length] = new Option（＆＃34; Properties＆＃34;，＆＃34;＆＃34;）; var options = response.getElementsByTagName（＆＃39; option＆＃39;）; 根据我的阅读，document.createElement（＆＃34; select＆＃34;）动态创建select标签。我的问题是，如何使用Bootstrap样式制作动态生成的select标签（即使用class =＆＃34; form-control＆＃34;）？我希望通过jQuery / JavaScript动态生成下拉列表。（即，不使用HTML / JSP文件中的select标记。提前致谢！

Answer 1

你可以这样做：

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 here的更多信息。

Answer 2

您可以使用$（＆＃39;元素＆＃39;）来创建任何文档元素然后使用.append（元素）将元素放到目标父元素中......如果有效，请尝试使用我的代码

＆＃13;

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

＆＃13;

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

Answer 3

一般来说，我会创造新的东西 https://jsfiddle.net/Ljdxnwot/5/ 我写的文字

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

Answer 4

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

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

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

4 个答案: