如果未选择警报,则从动态创建的多个淹没中进行检查
Check from multiple drowpdowns dynamically created if not selected alert
因此,我有一个从数据库中动态创建的下拉选择列表,如果选择了某个内容,我想检查其中的每一个,如果没有,则发出警报,不要提交。
这是下拉的代码
<?php if ($options) { ?>
<?php foreach ($options as $option) { ?>
<?php if ($option['type'] == 'select') { ?>
<div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?> btn-group">
<label class="control-label text-uppercase " for="input-option<?php echo $option['product_option_id']; ?>"><?php echo $option['name']; ?></label>
<select name="option[<?php echo $option['product_option_id']; ?>]" id="input-option<?php echo $option['product_option_id']; ?>" class="form-control">
<option value=""><?php echo $text_select; ?></option>
<?php foreach ($option['product_option_value'] as $option_value) { ?>
<option value="<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
</option>
<?php } ?>
</select>
</div>
<?php } ?>
<?php } ?>
<?php } ?>
<input type="submit" class="btn btn-success" name="filepicker" id="btncheck" value="Continue">
这就是JS:
$('#btncheck')
.click(function(){
if ($("select")[0].selectedIndex <= 0) {
alert("Please select option");
return false;
}
});
它只有在没有选择任何下拉菜单的情况下才有效,但我希望能够单独检查每个下拉菜单,如果没有选择或没有选择其中一个下拉菜单,则为每个下拉菜单弹出警报,知道如何做到这一点吗?
更新:
好的,如果没有选择任何下拉列表,我已经设法让警报和提交返回false,但现在我得到了每个没有选择的警报。。。如果我有10次下降,就会弹出很多警报。。。我怎么能只有一个警报,但仍然检查每个警报。。。?或者我可以在提醒信息中说是哪个下拉列表吗?
参见我使用的JS:
$('#optionForm').submit(function(event)
{
$('select').each(function()
{
if($(this).val() === "")
{
alert( "Please complete selection options!" );
event.preventDefault();
}
});
});
更新后,您可以使用一个临时变量来检查每个DDL,但只有一条消息。
$('#optionForm').submit(function(event)
{
var isValid = true;
$('select').each(function()
{
if($(this).val() === "")
{
isValid = false;
return false;
}
});
if(!isValid)
{
alert( "Please complete selection options!" );
event.preventDefault();
return false;
}
});
您需要循环浏览select
s的集合。
$('#btncheck').click(function()
{
$('select').each(function()
{
if ( $(this).val() == "" )
{
alert("Please select option");
return false;
}
}
});
您需要使用这样的循环来检查每个下拉列表:
$('#btncheck').click(function()
{
$('select').each(function()
{
if($(this).val() === "")
{
alert("Please select option");
return false;
}
});
});
您还可以添加特定的CSS类,以指导用户确定消息涉及的下拉列表。
$('#btncheck').click(function()
{
$('select').each(function()
{
if($(this).val() === "")
{
$(this).removeClass('success').addClass('error');
alert("Please select option");
return false;
}
else
{
$(this).removeClass('error').addClass('success');
}
});
});
试试这个;)
PHP代码:
在选择字段后添加<span class="help-inline danger"></span>
以显示错误。
<?php if($options){ ?>
<?php foreach($options as $option){ ?>
<?php if($option['type'] == 'select'){ ?>
<div class="form-group<?php echo ($option['required']?' required':''); ?> btn-group">
<label class="control-label text-uppercase " for="input-option<?php echo $option['product_option_id']; ?>"><?php echo $option['name']; ?></label>
<select name="option[<?php echo $option['product_option_id']; ?>]" id="input-option<?php echo $option['product_option_id']; ?>" class="form-control">
<option value=""><?php echo $text_select; ?></option>
<?php foreach($option['product_option_value'] as $option_value){ ?>
<option value="<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
</option>
<?php } ?>
</select>
<span class="help-inline danger"></span>
</div>
<?php } ?>
<?php } ?>
<?php } ?>
<input type="submit" class="btn btn-success" name="filepicker" id="btncheck" value="Continue">
JavaScript代码:
<script>
$('#optionForm').submit(function(event){
var errors = false;
$('select').each(function(index){
if($(this).val() == ""){
/* add required error. */
$(this).closest('.help-inline').html('This field is required.');
errors = true;
}else{
/* remove required error. */
$(this).closest('.help-inline').html('');
}
/* we can hide/show error message instead of updating html */
});
if(errors){
/* don't submit error found */
event.preventDefault();
}
});
</script>
相关文章:
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 为effect Composer创建GodRays效果过程
- 从javascript创建一个列表
- onkeyup无法动态创建多个文本区域
- 如何使用javascript从主svg对象动态创建svg视图框
- 如何访问声音管理器2创建的声音对象
- 我已经创建了一个jquery转盘,并使用if条件来运行和停止转盘
- Kendo:我该如何在树视图中创建一个递归的hieiarchy
- 使用Facebook live API创建实时视频对象时的隐私设置
- 在动态创建的元素上获取对特定选择器的引用
- 如何创建带有插槽的vue js组件预加载程序
- 如何在创建键时引用来自同一对象的键
- 如何创建JSON数组
- 从html创建一个指令,该指令按类名应用函数
- 使用Javascript创建测验页面
- 更改使用Chart.js创建的图表中的轴线颜色
- JavaScript名称空间和对象创建
- JQuery对动态创建的对象进行选择
- 创建带有和不带有JavaScript的Bootstrap下拉菜单
- 如果未选择警报,则从动态创建的多个淹没中进行检查