Bootstrap-如何添加 <select class=“form-control”>动态地在JavaScript中？
[英]Bootstrap - How to add <select class=“form-control”> dynamically in JavaScript?
问题描述
I'm learning Bootstrap and jQuery. 
我正在学习Bootstrap和jQuery。 I'm very new to both of them. 我对他们两个都是新手。
I would like to generate the tag <select class="form-control"> dynamically through JavaScript code. 我想通过JavaScript代码动态生成标签<select class="form-control"> 。
I have the following code in my 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');
From what I've read, the document.createElement("select") creates the select tag dynamically. 根据我的阅读， document.createElement("select")动态创建select标签。
My question is, how do I make that dynamically generated select tag using Bootstrap style (ie using class="form-control" )? 我的问题是，如何使用Bootstrap样式（即，使用class="form-control" ）动态生成选择标签？
I want the dropdown to be generated dynamically through jQuery/JavaScript (ie, without using the select tag in the HTML/JSP file. 我希望通过jQuery / JavaScript动态生成下拉列表（即，不使用HTML / JSP文件中的select标记。
4 个解决方案
解决方案1
1 已采纳 2016-02-26 23:54:13
You could do something like this: 您可以执行以下操作：
property.className = "form-control";
Full: 充分：
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');
解决方案2
0 2016-02-27 00:01:01
You can use the $('element') to create any document element then use the .append(element) to put the element to the target parent... Try my code if it works 您可以使用$（'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>
解决方案3
0 2016-02-27 00:03:46
Generally i create new things like https://jsfiddle.net/Ljdxnwot/5/ i write such as text 通常，我会创建诸如https://jsfiddle.net/Ljdxnwot/5/之类的新内容，例如文字
var txt="<select class'form-contro'>"+
"</select>";
解决方案4
0 2016-02-27 00:16:03
You can use the $('element') to create any document element then use the .append(element) to put the element to the target parent... Try my code if it works 您可以使用$（'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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.