select option to fetch other inputs

What Im trying to do is select item name where is ID and if item selected it automatically adds that item serial number to serial number input.

I think it should be used ajax maybe but I dont know how exactly.

Item Name:<br />
<div class="select-holder">
    <i class="fa fa-caret-down"></i>
    <?php
    if($_items->count_items() == 0)
        echo '<select name="item-name" disabled><option value="no">You need to add a item first</option></select>';
    else{
        echo '<select name="item-name" id="change-item">';
        $items = $_items->get_items_dropdown();
        while($item = $items->fetch_object()) {
            echo "<option value="{$item->id}">{$item->name} - {$item->serialnumber}</option>";
        }
        echo '</select>';
    }
    ?>
</div>
Serial Number:<br />
<div class="ni-cont">
    <input type="text" name="item-serialnumber" class="ni" disabled/>
</div>

I have also other inputs like description, price and etc.. to fetch these inputs with these values.

example: i need get data to my field from select option id (value)

<input type="text" name="item-serialnumber" value="<?php echo $_items->get_item_serialnumber($id); ?>" class="ni" disabled/>

<input type="text" name="item-serialnumber" value="<?php echo $_items->get_item_description($id); ?>" class="ni" disabled/>

Answer

That value is already shown inside your select-box you can simply use onchange event and then use $(this).find("option:selected").text().split('-')[1] this will give serial no then put it inside your input-box using $('[name=item-serialnumber]').val(somevalue) .Also ,you can send id via ajax to your server page and fetch result.

Demo Code :

$("#change-item").on("change", function() {
  var value = $(this).find("option:selected").text().trim().split('-')[1]
  $("[name='item-serialnumber']").val(value)
  var id = $(this).val();
  //use ajax :

  $.ajax({
    url: "somepgaename.php", //the page containing php script
    type: "post", //request type,
    dataType: 'json',
    data: {
      id: id //send id as well
    },
    success: function(data) {
      console.log(data.yourfieldname);
      //put inside your input fields values like :
      // $("[name='item-serialnumber']").val(data.serialno)
    }
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Item Name:<br />
<div class="select-holder">
  <i class="fa fa-caret-down"></i>
  <select name="item-name" id="change-item">
    <option value="1">Abc-123</option>
    <option value="2">Abc2-122</option>
    <option value="3">Abc2-132</option>
  </select>
</div>
Serial Number:<br />
<div class="ni-cont">
  <input type="text" name="item-serialnumber" class="ni" disabled/>
</div>

Then , at your server end get the id pass via ajax using $_POST['id'] then fetch result using select query and send them back to ajax using echo json_encode($somearray); i.e:

$id = $_POST['id'];
$stmt = $pdo->prepare("SELECT * FROM tablename WHERE id=:id");
$stmt->execute(['id' => $id]); 
//put fetch result inside array..send back to ajax 
//echo json_encode($somevalue);