Adding a value to a dropdown using Javascript in a Laravel Blade file-CodePudding

I have what I think is a simple question.

I have a small javascript script on a laravel blade file that outputs the a list of states into a dropdown control, depending on the selected country from another dropdown control.

The 2 tables are simple, they are a list of countries and a list of states The states table lists states against a country_id.

It all works fine, but what I want, is to add at the top of the presented list of states, a "Not Needed" option at the top of the presented states.

Here is the JS script within the view (blade file)

<script type="text/javascript"> // SM - State Lookup based on country
  jQuery(document).ready(function ()
  {
          
          jQuery('select[name="service_country_id"]').on('change',function(){
          var countryID = jQuery(this).val();
          if(countryID)
          {
              jQuery.ajax({
                  url : '/getStates/'  countryID,
                  type : "GET",
                  dataType : "json",
                  success:function(data)
                  {
                      console.log(data);
                      jQuery('select[name="service_state_id"]').empty();
                      jQuery.each(data, function(key,value){
                      $('select[name="service_state_id"]').append('<option value="'  key  '">'  value  '</option>');
                      });
                  }
              });
          }
          else
          {
              $('select[name="state"]').empty();
          }
          });
  });
</script>

Here is the dropdowns in the same view (blade file).

              <div >
                <label  for="country">Country <span >*</span></label>
                <select v-model="form.country"  id="service_country_id" name="service_country_id">
                    <option value="">Select One...</option>
                        @foreach ($countries as $key => $value)
                            <option value="{{ $value->id }}">{{ $value->name }}</option>
                        @endforeach
                </select>
              </div>
              <div >
                  <label  for="state">State <span >*</span></label>
                  <select v-model="form.state"  id="service_state_id" name="service_state_id">
                      <option>Select One...</option>
                  </select>
              </div>

Here is the search and output from the controller.

public function getStates($id) 
{        
    $states = DB::table("states")->where("country_id",$id)->pluck("name","id");
    return json_encode($states);

}

I am just trying to find a simple way to concatinate my json_encoded array "Not Needed" to the top of the dropdown control's list of available states.

CodePudding user response：

I maybe misunderstanding, but just write your default state directly into you blade file.

CodePudding user response：

I did some more research and decided to just add a "Not Needed" option to the array as per below into the controller and this works. It would still be good to know how to do it in the JS file, but this works for now.

$states[0] = "Not Needed";