選択されていない場合、動的に作成された複数のドロップダウンからのチェック

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

それは、ドロップダウンのどれが選択されていない場合にのみ動作しますが、私のことができるようにしたいと思いますそれらのそれぞれを個別にチェックし、選択されていない場合、または選択されていない場合はドロップダウンごとに警告をポップします。

UPDATE：

[OK]を私は、ドロップダウンのいずれかが選択されていない場合、警告及び提出がfalseを返してもらうために管理しているが、今私が選択されていない1つのそれぞれのアラートを取得します。 ..もし私が10回のドロップダウンを持っていると、多くのアラートがポップアップします...どうすれば1つのアラートだけが得られますか？または、それがどのドロップダウンであるかを警告メッセージで伝えることはできますか？

は、私が使用JSを参照してください：

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

Answer 1

更新後、一時変数を使用して各DDLをチェックできますが、メッセージは1つのみです。

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