SelectBoxIt -页面上的多个选择(动态)
SelectBoxIt -页面上的多个选择(动态)
提问于 2013-10-09 13:02:26
如果需要，我有一个页面必须有多个选择框。我正在使用这个插件来设置选择框的样式。
$('body').on('click', '.add_option.add_title', function() {
$('.add_title_option').after($('.add_title_option .controls').html());
});这是我的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>它确实“克隆”了itselfs，但是select没有功能。
如何通过javascript添加多个选择？
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-10-09 13:17:52
$('body').on('click', '.add_option.add_title', function() {
$('.add_title_option').after($('#title').clone());
});Stack Overflow用户
发布于 2013-10-09 14:01:26
你需要用
$('.add_title_option').after($('.selectContainer select').clone().show());.的
$('.add_title_option').after($('.add_title_option .controls').html());为了复制它，并将显示从无设置为显示。然后，您必须使用.selectBoxIt()转换您的复选框。
用这个插件定制它。另外，我已经从选择框中删除了id，以确保我们不会有双重id。以下是代码：
<!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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19272854
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号