Check von mehreren Drowdowns dynamisch erstellt, wenn nicht ausgewählt Alarm

Question

So habe ich eine Liste der Dropdown-Auswahl dynamisch aus einer Datenbank erstellt und ich möchte für jeden von ihnen, wenn etwas ausgewählt ist, wenn nicht, tun eine Warnung und nicht tun einreichen.

Dies ist der Code für die Dropdown-Listen

<?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"> 

Und dies ist die JS:

$('#btncheck') 
.click(function(){ 
    if ($("select")[0].selectedIndex <= 0) { 
      alert("Please select option"); 
      return false; 
} 
}); 

Es funktioniert nur, wenn keiner der Dropdown-Listen ausgewählt werden, aber ich möchte in der Lage sein check jeden von ihnen einzeln und einen Alarm für jeden Dropdown, wenn nicht ausgewählt oder wenn einer von ihnen nicht ausgewählt ist, eine Idee, wie man das macht?

UPDATE:

Ok Ich habe verwalten die Warnung und Unterwerfung zu bekommen als falsch zurück, wenn der Drop-Down nicht ausgewählt, aber jetzt erhalte ich eine Benachrichtigung für jede der einen, die nicht ausgewählt werden. .. wenn ich 10 dropdowns habe, die viel auftauchen werden ... wie kann ich nur eine Warnung haben, aber immer noch jeden prüfen ...? Oder kann ich in der Warnmeldung sagen, welches Dropdown-Feld das ist?

Siehe JS I verwendet:

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

Answer 1

Nach dem Update können Sie eine temporäre Variable verwenden, um jede DDL zu überprüfen, haben aber nur eine Nachricht.

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

Sie müssen sich durch Ihre Sammlung von select s Schleife.

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

Answer 3

Sie müssen jede Dropdown-Listen überprüfen, um eine Schleife wie folgt aus:

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

Sie können auch Besonderheiten CSS-Klassen hinzufügen, um den Benutzer zu führen, um zu bestimmen, welche durch die Drop-Down-Nachricht betrifft.

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

Try this;)

PHP-Code:

hinzugefügt <span class="help-inline danger"></span> nach Auswahlfeld Fehler zu zeigen.

<?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-Code:

<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>