http://jsfiddle.net/bbh2y4dL/5/數等於數的文本字段,從下拉菜單中選擇
HTML
<table>
<tr>
<td>
<select class="form-control mySelectBoxClass childage" name="noofchilds[]">
<option selected>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
</tr>
</table>
<a class="repeat">ADD MORE</a>
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'" class="add" style="display:none">Add Age</a>
<div id="light" class="white_content">
<div class="textboxDiv"></div><a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
</div>
<div id="fade" class="black_overlay"></div>
CSS
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border-radius:7px;
background-color: rgba(255, 255, 255, 1);
z-index:1002;
overflow: auto;
}
.form-control {
display: block;
width: 100%;
height: 26px;
padding: 2px 0px 2px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #010F2B;
vertical-align: middle;
background-color: #E6E8E9;
border: 2px solid #ebebeb;
border-radius: 4px;
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
的JavaScript
$(function() {
$(".repeat").on('click', function (e) {
e.preventDefault();
var $self = $(this);
$self.before($self.prev('table').clone());
});
});
$(document).ready(function() {
$(".childage").change(function() {
var selVal = $(this).val();
$(".textboxDiv").html('');
if (selVal > 0) {
$(".add").css("display", "block");
for (var i = 1; i <= selVal; i++) {
$(".textboxDiv").append('<input type="text" class="form-control" /><br>');
}
} else {
$(".add").css("display", "none");
}
});
});
我試圖創建一個彈出 它顯示的文本字段的數量等於所選值的數量,它在這段代碼中表現很好,但問題是我還必須複製選擇框,然後使用所有創建的選擇框創建相同的功能......檢查我的小提琴並提出建議任何溶液
請具體談談是什麼問題。你爲什麼不能用其他'
這意味着如果你有3個選擇框,每選擇3個手段共需要9個文本框?對? – 2015-03-31 12:38:05