以数组形式传递values =“”数据，使用AJAX将“：”分隔到另一个页面

Is there a way to pass multiple value="", but select only 1 as a parameter for another <select> dropdown?

I have this SQL query that calls all the deptcode, and then it's department name. My problem now is that I can't split the data in values="" because I set it in an array form using :, in this line echo "<option value='".$row['departmentname'].":".$row['deptcode']."'>".$row['departmentname']." : ".$row['deptcode']."</option>";, ".$row['departmentname']." should only be used as a SQL parameter, and ".$row['deptcode']." should be used elsewhere.

This is my query/sqlsrv_query-employees.php

<?php
$sql = "
SELECT DISTINCT LEFT (departmentcode,4) as deptcode,
departmentname from departmentmasterfile 
LEFT JOIN hrdjobpositionentry 
ON hrdjobpositionentry.department=departmentmasterfile.departmentname 
ORDER BY deptcode
";

      include 'query/sqlsrv_query-global.php';

      if(sqlsrv_num_rows($query) > 0) {
        while($row = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC)) {

          echo "<option value='".$row['departmentname'].":".$row['deptcode']."'>".$row['departmentname']." : ".$row['deptcode']."</option>";
        }
      }
      ?>

This data is being transferred to this part of the modal.

<div class="form-group">
<label for="departmentselector" class="col-sm-3 control-label">Department Code</label>
<div class="col-sm-9"><select class="form-control input-sm" id="departmentselector" name="departmentselector" style="text-transform:uppercase;width:90%">
<option>------- Select --------</option>
<?php include 'query/sqlsrv_query-employees.php'; ?>
</select></div></div>

Now, I understand that it can be split using this, and I'm only using this script to pass the data into <input> boxes inside modal.

<script>
$("#departmentselector").change(function () {
let value = this.value.replace(/[{}]/, '').split(':');
$("#emoloyeeidno4").val(value[0]);
console.log(value[1]) // do something with the second value
$("#emoloyeeidno7").val(value[1]);
console.log(value[2]) // do something with the third value
      });
</script>

My problem now is that this SQL query won't work because of the data arrays being passed is value='".$row['departmentname'].":".$row['deptcode']."'>, when I only need ".$row['departmentname']." for it to work.

This is my employee_data-department-jobposition.php

<?php
include 'includes/session.php';
if(isset($_POST['jobposition'])) {
    $jobposition=$_POST['jobposition'];
  $sql = "SELECT jobposition,department from hrdjobpositionentry where department = '$jobposition'";

      $query = sqlsrv_query($conn, $sql, array(), array("Scrollable" => SQLSRV_CURSOR_KEYSET));

  if(sqlsrv_num_rows($query) > 0) {
    echo "<option value=''>------- Select --------</option>";
while($row = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC)) {
          echo "<option value='".$row['department']."'>".$row['jobposition']."</option>";
    }
  }
}

?>

And the data is being passed to employee_data-department-jobposition.php using AJAX.

This is my AJAX. employee_data_department-selection.php

<script>
// GET DEPARTMENT NAME
  $(document).ready(function() {
  $("#departmentselector").change(function() {
    var departmentselector = $(this).val();
    if(departmentselector != "") {
      $.ajax({
        url:"employee_data-department-jobposition.php",
        data:{jobposition:departmentselector},
        type:'POST',
        success:function(response) {
          var resp = $.trim(response);
          $("#jobposition").html(resp);
        }
      });
    }
    else {
      $("#jobposition").html("<option value=''>------- Select --------</option>");
    }
  });
 });
</script>

Which is also being called inside the modal.

<div class="form-group">
<label for= "jobposition" class= "col-sm-3 control-label">jobposition</label><div class="col-sm-9"><select class="form-control input-sm" id="jobposition" name="jobposition" style="text-transform:uppercase;width:90%">
<option>------- Select --------</option></select></div></div>

<?php include 'includes/employee_data_department-selection.php'; ?>

How will I be able to split the data when being passed into AJAX so that only ".$row['departmentname']." from echo "<option value='".$row['departmentname'].":".$row['deptcode']."'>".$row['departmentname']." : ".$row['deptcode']."</option>"; will be used as a parameter for if(isset($_POST['jobposition'])) in employee_data-department-jobposition.php, because I'm using :".$row['deptcode']." for another purpose.

Or better yet, a way to split the data being passed in data:{jobposition:departmentselector} in employee_data_department-selection.php.