Question

所以我有一个从数据库动态创建的下拉选项列表，如果没有选择，我想检查每个选项，如果没有，请做一个提醒但不提交。

这是下拉列表的代码

<?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();
    }
  });
});

Answer 1

更新后，您可以使用临时变量来检查每个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;
    }
});

Answer 2

您需要遍历select的集合。

$('#btncheck').click(function() 
{ 
    $('select').each(function() 
    { 
        if ( $(this).val() == "" )  
        {
            alert("Please select option");
            return false;
        } 
    }
});

Answer 3

您需要使用如下循环检查每个下拉列表：

$('#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');
        }
    });
});

Answer 4

试试这个;）

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>

如果未选择警报，则从动态创建的多个drowpdowns中进行检查

4 个答案: