SelectBoxIt-页面上的多个选择（动态）
[英]SelectBoxIt - Multiple selects on page (dynamic)
问题描述
I have a page that has to have multiple select boxes if needed. 
如果需要，我有一个页面必须具有多个选择框。 I'm using this plugin to style the selectbox. 我正在使用此插件来设置选择框的样式。
$('body').on('click', '.add_option.add_title', function() {
$('.add_title_option').after($('.add_title_option .controls').html());
});
This is my javascript that I "clone" the selectbox and add it after it. 这是我的JavaScript，我“克隆”了选择框并在其后添加了它。
<div class="add_title_option">
<div class="control-group">
<label class="control-label" for="title">Title</label>
<div class="controls">
<select id="title" name="title">
<option></option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
</select>
<a href="javascript:false;" class="add_option add_title">
<img src="<?=base_url();?>assets/img/add_options.png" alt="" />
</a>
</div>
<div class="error" id="title_error"></div>
</div>
</div>
It does "clone" itselfs, but the select is not functional. 它本身“克隆”，但是选择不起作用。
How should I do it to add multiple selects through javascript? 如何通过javascript添加多个选择？
2 个解决方案
解决方案1
1 已采纳 2013-10-09 13:17:52
$('body').on('click', '.add_option.add_title', function() {
$('.add_title_option').after($('#title').clone());
});
解决方案2
1 2013-10-09 14:01:26
You need to use 您需要使用
$('.add_title_option').after($('.selectContainer select').clone().show());
Insted of 插入
$('.add_title_option').after($('.add_title_option .controls').html());
In order to clone it, and set display from none to show. 为了克隆它，并将display从none设置为show。 Then you have to transform your select box with .selectBoxIt() 然后，您必须使用.selectBoxIt()转换选择框
To customize it with this plugin. 使用此插件对其进行自定义。 Also, I have removed the id from select box to be sure we will not have dublicated ids. 另外，我从选择框中删除了ID，以确保我们不会复制ID。 Here is the code: 这是代码：
<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="http://gregfranko.com/jquery.selectBoxIt.js/css/jquery.selectBoxIt.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://gregfranko.com/jquery.selectBoxIt.js/js/jquery.selectBoxIt.min.js"></script>
<script>
$(function() {
$(".titleSelect").selectBoxIt();
$('body').on('click', '#dublicateButton', function() {
$('.add_title_option').after($('.selectContainer select').clone().show().selectBoxIt());
});
});
</script>
</head>
<body>
<div class="add_title_option">
<div class="control-group">
<label class="control-label" for="title">Title</label>
<div class="controls">
<div class="selectContainer" >
<select class="titleSelect" name="title">
<option></option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
</select>
</div>
<a href="javascript:void(null);" id="dublicateButton" class="add_option add_title">
click
</a>
</div>
<div class="error" id="title_error"></div>
</div>
</div>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.