Add Label Null Value in the Beginning Dropdownlist Laravel

This is something that I found out later after searching via google for a solution on how to add label with null value in the beginning of dropdown list in Laravel framework which is used as the main framework to build a web-based application.

For an example, if there is a HTML select element which is defined in a blade view template file and the HTML option element located inside that HTML select element is generated as shown below :

<div class="form-group full-width-chart"> 
<label class="col-md-2 control-label">Operating System</label>
<div class="col-md-4">
<select id="operating_system">
...
</select>
<span class="text-danger" id="operating_system" />
</div>
</div>

So, how can the HTML select element with the id value of “operating_system” can be filled with HTML option element where the values for each of them are retrieved from a Model which is mapped to a certain table in Laravel. Furthermore, inside the HTML select element which on the top of it or the HTML option element at the beginning of it is actually inserted with an empty value and a certain label.

So, to generate the HTML option element, it is handled solely by the associated controller. For an example, there is a controller which is directing a URL to a certain view which is represented by the view where several part of the snippet code has already written above. It is the one displaying the HTML select element. And the snippet code for generating the value which is going to be passed to a generated HTML option element in the blade view template is shown below :

function edit($id_server)
{
$os = DB::table('os')->get()->toArray();
return view('server.edit', $os);
}

The above snippet code is for getting all available operating system type which is passed to the view to be rendered in the form of HTML option element. But the above content only generated value which is containing values and those values are going to be converted into an HTML option element which can be selected. If the variable ‘$os’ is printed in the above snippet code with the help of ‘dd’ as shown below :

function edit($id_server)
{
$os = DB::table('os')->get()->toArray();
dd($os)
return view('server.edit', $os);
}

It will return the following result :

array:3 [▼
  0 => {#213 ▼
    +"id_os": 1
    +"name": "CentOS"
    +"version": "7.1553"
  }
  1 => {#214 ▼
    +"id_os": 5
    +"name": "Microsoft Windows"
    +"version": "10"
  }
  2 => {#215 ▼
    +"id_os": 6
    +"name": "Ubuntu "
    +"version": "14.04"
  }
]

Since, there is a need to insert a null value with the label for instructing to choose the operating system without having the ability to be selected. Just add an HTML option element before inserting the iteration process of the variable contains the value which is going to be populated into lists of new HTML option element as shown in the snippet code below :

<div class="form-group full-width-chart"> 
<label class="col-md-2 control-label">Operating System</label>
<div class="col-md-4">
<select id="operating_system">
<option selected disabled>Please Choose an Operating System</option>
@foreach($os as $operating_system)
 <option value="{{ $operating_system->id_os }}">
     {{ $operating_system->name }} 
     {{ $operating_system->version }}</option>
@endforeach
</select>
<span class="text-danger" id="operating_system" />
</div>
</div>

So, the dropdown list populated will have an additional option HTML element which possess a null value based on the above snippet code where it is represented with the following line :

<option selected disabled>Please Choose an Operating System</option>