[英]Limit number of element appends Javascript
I have a simple bit of code to append additional select fields to a form, with the idea that the user can add more fields as required. 我有一些简单的代码可以将其他选择字段添加到表单,以使用户可以根据需要添加更多字段。 However, I want to be able to define a maximum number of input elements that can be appended.
但是,我希望能够定义可以附加的最大输入元素数。 My current code is:
我当前的代码是:
<script type="text/javascript">
var count = 0;
$(function(){
$('p#add_field').click(function(){
count += 1;
$('#container2').append(
'<strong>Golf Course ' + count + '</strong>   '
+'<select id="field_' + count + '" name="fields[]">' + "<?php foreach ( $courses as $course ) { $name = $course->coursename; ?>"+"<?php echo '<option value=\''.htmlspecialchars($name).'\'>'.$name.'</option>'; ?>"+"<?php } ?>"+'</select><br />')
});
});
</script>
Any help would be much appreciated. 任何帮助将非常感激。
<script type="text/javascript">
var count = 0;
var max = 5;
$(function(){
$('p#add_field').click(function(){
count += 1;
if(count >= max)
return;
$('#container2').append(
'<strong>Golf Course ' + count + '</strong>   '
+'<select id="field_' + count + '" name="fields[]">' + "<?php foreach ( $courses as $course ) { $name = $course->coursename; ?>"+"<?php echo '<option value=\''.htmlspecialchars($name).'\'>'.$name.'</option>'; ?>"+"<?php } ?>"+'</select><br />')
});
});
</script>
Still, your code is quite unmaintainable - separate PHP from JS. 尽管如此,您的代码还是难以维护的-将PHP与JS分开。
EDIT: consider this solution as well: 编辑:也考虑此解决方案:
// this way you provide a JSON serialization of your server data
<script type="application/json" id="select-data">
<?php echo json_encode($courses); ?>
</script>
// this is pure js: doesn't care where the data comes from
<script type="text/javascript">
$(function(){
// we parse the JSON string, and get a Javascript array
var selectData = $.parseJSON( $("#select-data").text() );
var count = 0;
var max = 5; // pick the number you want here
// we create a new select, based on the count parameter
function makeSelect(count){
var $select = $('<select>', { id : 'field_' + count, name : "fields[]" });
$.each(selectData, function(){
$select.append(
$('<option>', { value : this.name, text : this.name })
)
})
return $select;
}
$('p#add_field').click(function(){
count += 1;
if(count >= max)
return;
$('#container2').append($('<strong>', { text : "Golf Course " + count }));
$('#container2').append(makeSelect(count));
});
});
</script>
try this 尝试这个
<script type="text/javascript">
var count = 0;
var limit = 5;
$(function () {
$('p#add_field').click(function () {
count += 1;
if ($('#container2 select').length <= limit) {
$('#container2').append(
'<strong>Golf Course ' + count + '</strong>   '
+ '<select id="field_' + count + '" name="fields[]">' + "<?php foreach ( $courses as $course ) { $name = $course->coursename; ?>" + "<?php echo '<option value=\''.htmlspecialchars($name).'\'>'.$name.'</option>'; ?>" + "<?php } ?>" + '</select><br />')
}
else {
alert('Limit Exceed');
}
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.