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

Question

我正在学习Bootstrap和jQuery。 我对他们两个都是新手。

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

我的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")动态创建select标签。

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

我希望通过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的更多信息，请点击此处。

Answer 2

您可以使用$（'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>

Answer 3

通常，我会创建诸如https://jsfiddle.net/Ljdxnwot/5/之类的新内容，例如文字

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

Answer 4

您可以使用$（'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>

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

问题描述

4 个解决方案

解决方案1
1 已采纳 2016-02-26 23:54:13

解决方案2
0 2016-02-27 00:01:01

解决方案3
0 2016-02-27 00:03:46

解决方案4
0 2016-02-27 00:16:03

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

问题描述

4 个解决方案

解决方案1 1 已采纳 2016-02-26 23:54:13

解决方案2 0 2016-02-27 00:01:01

解决方案3 0 2016-02-27 00:03:46

解决方案4 0 2016-02-27 00:16:03

解决方案1
1 已采纳 2016-02-26 23:54:13

解决方案2
0 2016-02-27 00:01:01

解决方案3
0 2016-02-27 00:03:46

解决方案4
0 2016-02-27 00:16:03