因此，我有一个从数据库中动态创建的下拉选择列表，如果选择了某个内容，我想检查其中的每一个，如果没有，则发出警报，不要提交。
这是下拉的代码
<?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>