javascript - 未从下拉列表中选择任何值后如何显示错误消息？

Question

我面临一个问题。我想在未从下拉框中选择任何值后显示警报消息:-

在这里您可以看到图像，此处将显示开放时间。当用户未从下拉列表中选择任何值时，“确定”用户将继续。如果用户从星期一第一个下拉列表中选择值，但未从第二个下拉列表中选择任何值，然后单击“保存并继续”，我想显示提醒消息请以正确的方式选择开放时间。周二和其他日子也是如此。谁能帮我。

这是我的 html 代码:-

enter code here
<?php 
$from =array("6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23"); 
 $days = array("Monday", "Tuesday", "Wednesday", "Thursday","Friday","Saturday","Sunday");  
 $to =array("7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22"); ?> 
<div class="col-md-12 col-sm-12 col-xs-12 fitness-time">
    <div class="row">
        <div class="additional">
            <div class="form-group">
                <span class="fitness-hours">
                    <h4>Opening Hours</h4>
                </span>
                <div>
                    <div class="info_user_detail">
                        <table class="table_info1 table-striped">
                            @foreach($days as $key=> $alldays)
                            <tr>
                                <td>
                                    <div class="checkbox no-margin">
                                        <label>
                                        <input name="days[]" value="{{ $alldays }}"type="checkbox">{{ $alldays }}
                                        </label>
                                    </div>
                                </td>
                                <td>
                                    <div class="time-class">
                                        <select name="from[]"class="select-class from">
                                            <option value="">Select</option>
                                            @foreach($from as $froms)
                                            <option>{{ $froms }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </td>
                                <td>
                                    <div class="time-class">
                                        <select name="to[]"class="select-class to">
                                            <option value="">Select</option>
                                            @foreach($to as $to)
                                            <option>{{ $froms }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="btn-save">
    <button id="CheckImageCount" type="submit" class="btn btn-info">Save And Coutinue </button>
</div>

Jquery 代码:-

//enter code here
$('#CheckImageCount').on('click',function(){
        var value;
        $(".from").on('change',function(){
            value= $(this).val();
    });
    if(value != ""){
        var hoursvalue = $('.from').parents('td:first').next().find('.to').val();
        if(hoursvalue == ""){
            alert("PLease select opening hours in right way!"); return false;
        }else{
            alert("success"); return false;
        }
    }else{
        return true;
    }
});

任何人都可以编写 JavaScript 或 jquery 代码来实现此功能。预先感谢:)

Answer 1

$(document).ready(function(){//page is ready
alert("loading");
 var elems=[];

$('#form').on('submit',function(){// if form is submitted (please add the id form to your form)
    var value=elems.length;// if theres an unfinished answer elem, ret false
   if(value!=0){
   alert(value+" unfinished days ...");
   return false;
   }
    return true;
    });
   $(".from").on('change',function(){
    var val=0;
    var elem=$(this).parent().parent().parent(); //the day
    elem.find("input", function(){
     if($(this).val()){
     val++;//found a value
      }
     });
    alert("elem has:"+val) ;
    if(val==1){//this day is unfinished, add to array
            if(elems.indexOf(elem)<0){//not added yet
           elems.push(elem);//add to unfinished answer elems
            }
    }else{
           //answer complete remove from waiting
           var index=elems.indexOf(elem);
           if(index>=0){
          elems.splice(index,1);//remove from answer elems
          }
    }
});
});