如果未选择警报，请从动态创建的多个下拉列表中检查

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

它仅在 none 个下拉菜单被选中时有效，但我希望能够单独检查每个下拉菜单，如果未选中或其中一个未被选中，则为每个下拉菜单弹出警报，知道怎么做吗？

更新：

好的，如果未选择任何下拉列表，我已经设法获得警报并提交给 return false，但现在我收到每个未选择的警报...如果我有 10 个下拉菜单，它们会弹出很多警报……我怎么可能只有一个警报，但仍然检查每个警报……？或者我可以在警告消息中说出它是哪个下拉菜单吗？

看我用的JS：

$('#optionForm').submit(function(event)
{
  $('select').each(function()
  {
    if($(this).val() === "")
    {
      alert( "Please complete selection options!" );
      event.preventDefault();
    }
  });
});

Answer 1

您需要遍历 select 的集合。

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

Answer 2

您需要使用如下循环检查每个下拉菜单：

$('#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 3

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

试试这个 ;)

PHP代码：

在 select 字段后添加 <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>

如果未选择警报，请从动态创建的多个下拉列表中检查

Check from multiple drowpdowns dynamically created if not selected alert

javascript

php

forms

jquery

dropdown