Kanchan186's avatar

how to set "required "validation for multiple dependent dynamic drop-down(values comes from database) list in javascript

view


<div class="form-group">
            <h5>Select Country <span class="text-danger">*</span></h5>
            <div class="controls">
                                            
                <select class="form-control" name="emp_country" id="emp_country" onchange="getState(this.value)" required>
                <option>--Select country--</option>
                @foreach($country as $br)
                <option value="{{$br->country_id}}">{{$br->country_name}}</option>
                 @endforeach
                </select>
            </div>
        </div>
                
        <div class="form-group">
            <h5>Select State <span class="text-danger">*</span></h5>
            <div class="controls">
                                            
                <select class="form-control" name="emp_state" id="emp_state" onchange="getCity(this.value) " required>
                <option>--Select State--</option>
                     
                </select>
            </div>
        </div>

       <div class="form-group">
            <h5>Select City <span class="text-danger">*</span></h5>
            <div class="controls">

               <select class="form-control" name="emp_city" id="emp_city" required>
               <option>--Select City--</option>
               
               </select>
           </div>
     </div>

script

 <script type="text/javascript">
                        
                         function getState(country)
                            {
                               if(country) {
                                        $.ajax({
                                            url: '{{url('/')}}/state/ajax/'+country,
                                            type: "GET",
                                            dataType: "json",
                                            success:function(data) {

                                             // alert(data);
                                             console.log(data)
                                        
                                                $('select[name="emp_state"]').empty();
                                                $('select[name="emp_state"]').prepend('<option value="">--Select State--</option>');
                                                $.each(data, function(key, value) {
                                                    $('select[name="emp_state"]').append('<option value="'+ key +'">'+ value +'</option>');
                                                });

                                            }
                                        });
                                    } else{
                                         $('select[name="emp_city"]').empty();
                                    }
                            }
                        
                         function getCity(state)
                            {
                               if(state) {
                                        $.ajax({
                                            url: '{{url('/')}}/city/ajax/'+state,
                                            type: "GET",
                                            dataType: "json",
                                            success:function(data) {
                                                  console.log(data)

                                                $('select[name="emp_city"]').empty();
                                                $('select[name="emp_city"]').prepend('<option value="">--Select City--</option>');
                                                $.each(data, function(key, value) {
                                                    $('select[name="emp_city"]').append('<option value="'+ key +'">'+ value +'</option>');
                                                });

                                            }
                                        });
                                    } else{
                                         $('select[name="emp_city"]').empty();
                                    }
                            }
</script>

0 likes
3 replies
Kanchan186's avatar

@van-india sir

there is dynamic dependent drop down and values comes from database please suggest me this type of solution

1 like

Please or to participate in this conversation.