Dependent dropdown using ajax how to display the name instead of its id

I'm trying to save both the program and subject to a student table but it only saves its id how can i change it to their names instead of id

register-student.blade.php

	<h5 class="mt-5 lead">Programs & Subjects</h5>
<div class="col mt-4 mb-3">
    <div class="col">
        <div class="form-outline form-line">
            <label class="form-label" for="form6Example2">Select Your Program</label>
            <select class="form-select" aria-label="Default select example" id="sel_program" name="program">
                <option disabled selected>-- Select Program --</option>
                @foreach ($programData['data'] as $program)
                    <option value="{{$program->id}}">{{$program->program}} - {{$program->description}}</option>
                @endforeach
            </select>
            <span class="text-danger">@error('program'){{$message}} @enderror</span>
        </div>
    </div>
</div>

<div class="row mt-4 mb-3">
    <div class="col-md-6 mt-2">
        <div class="form-outline form-line">
            <label class="form-label" for="form6Example1">1ST PERIOD</label>
            <select id='first_period' name='first_period' class="form-select">
                <option disabled selected>-- Select Subject --</option>
            </select>
            <span class="text-danger">@error('first_period'){{$message}} @enderror</span>
        </div>
    </div>
    <div class="col-sm-6 mt-2">
        <div class="form-outline form-line">
            <label class="form-label" for="form6Example2">2ND PERIOD</label>
            <select class="form-select" aria-label="Default select example" id="second_period" name="second_period">
                <option disabled selected>-- Select Subject --</option>
            </select>
            <span class="text-danger">@error('second_period'){{$message}} @enderror</span>
        </div>
    </div>
    <div class="col mt-3 mt-2">
        <div class="form-outline form-line">
            <label class="form-label" for="form6Example2">3RD PERIOD</label>
            <select class="form-select" aria-label="Default select example" id="third_period" name="third_period">
                <option disabled selected>-- Select Subject --</option>
            </select>
            <span class="text-danger">@error('third_period'){{$message}} @enderror</span>
        </div>
    </div>
</div>

<script type='text/javascript'>
        $(document).ready(function(){
        
            $('#sel_program').change(function(){
                // Department id
                var id = $(this).val();
        
                // Empty the dropdown
                $('#first_period').find('option').not(':first').remove();
        
                // AJAX request 
                $.ajax({
                url: '/student/auth/register-new-student/getSubjects/'+id,
                type: 'get',
                dataType: 'json',
                success: function(response){
                    var len = 0;
                    if(response['data'] != null){
                        len = response['data'].length;
                    }
        
                    if(len > 0){
                        // Read data and create <option >
                        for(var i=0; i<len; i++){
                            var id = response['data'][i].id;
                            var code = response['data'][i].code;
                            var subject = response['data'][i].subject;
                            var option = "<option value='"+ id +"'>"+ code + "\n" + subject +"</option>"; 
                            $("#first_period").append(option); 
                        }
                    }
                }
                });

                $('#second_period').find('option').not(':first').remove();
        
                // AJAX request 
                $.ajax({
                url: '/student/auth/register-new-student/getSubjects/'+id,
                type: 'get',
                dataType: 'json',
                success: function(response){
                    var len = 0;
                    if(response['data'] != null){
                        len = response['data'].length;
                    }
        
                    if(len > 0){
                        // Read data and create <option >
                        for(var i=0; i<len; i++){
                            var id = response['data'][i].id;
                            var code = response['data'][i].code;
                            var subject = response['data'][i].subject;
                            var option = "<option value='"+ id +"'>"+ code + "\n" + subject +"</option>"; 
                            $("#second_period").append(option); 
                        }
                    }
                }
                });

                $('#third_period').find('option').not(':first').remove();
        
                // AJAX request 
                $.ajax({
                url: '/student/auth/register-new-student/getSubjects/'+id,
                type: 'get',
                dataType: 'json',
                success: function(response){
                    var len = 0;
                    if(response['data'] != null){
                        len = response['data'].length;
                    }
        
                    if(len > 0){
                        // Read data and create <option >
                        for(var i=0; i<len; i++){
                            var id = response['data'][i].id;
                            var code = response['data'][i].code;
                            var subject = response['data'][i].subject;
                            var option = "<option value='"+ id +"'>"+ code + "\n" + subject +"</option>"; 
                            $("#third_period").append(option); 
                        }
                    }
                }
                });
            });
        });
    </script>

MainController

function registerNewStudent()
    {

        $programData['data'] = Program::orderby("program","asc")
        ->select('id','program','description')
        ->get();

        return view('auth.register-new-student', ['programData'=>$programData]);
    }

    function getSubjects($programid=0)
    {
        $subjects['data'] = Subject::orderby("code","asc")
        ->select('id','code','subject')
        ->where('program',$programid)
        ->get();
        return response()->json($subjects);
    }

subjects migration

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateSubjectsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('subjects', function (Blueprint $table) {
            $table->id();           
            $table->string('code');
            $table->integer('program');
            $table->string('subject');
            $table->string('unit');
            $table->string('period');        
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('subjects');
    }
}

program migration

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateProgramsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('programs', function (Blueprint $table) {
            $table->id();
            $table->string('code');
            $table->string('degree');
            $table->string('program');
            $table->string('description');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('programs');
    }
}