Retrieve data from combobox to other input fields - php

Question

I am PHP beginner and am having problems creating a combobox or a drop down list. The combobox or drop down list contains stock names, when I click any stock, the stock code and producer should be displayed. I have attached the code please. My code works well to retrieve stock code alone. How do I make the stockcode and producer to be retrieved.
This is what I am doing
<label class="col-lg-2 col-form-label" for="val-skill">Select Stock<span class="text-danger">*</span> </label>
<div class="col-lg-6">
<select id="stockname" name="stockname" class="form-control" required="">
<option value="0">Select Stock</option>
<?php
$ddaa = $pdo->query("SELECT id, stockname, stockno, producer FROM storemaster ORDER BY id");
while ($data = $ddaa->fetch(PDO::FETCH_ASSOC))
{
echo "<option value='$data[stockno]', '$data[producer]'> $data[stockname]</option>";
}
?>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Stock No</label>
<div class="col-sm-6"><input id="stockno" name="stockno" value="" class="form-control" type="text" readonly></div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Producer</label>
<div class="col-sm-6"><input id="producer" name="producer" value="" class="form-control" type="text" ></div>
</div>
<div class="col-sm-6 col-sm-offset-3"><br/><br/><br/>
<input type="submit" class="btn btn-lg btn-success btn-block" value="Submit">
</div>
</form>
</div>
</div>
<script>
document.getElementById("stockname").onchange = function () {
document.getElementById("stockno").value = this.value;
};
</script>

Answer 1

//PHP
echo '<option value="'.$data['stockno'].'" data-producer="'.$data['producer'].'"> '.$data['stockname'].'</option>';
<!--HTML Javascript-->
<script>
$('#stockname').on('change',function(){
if($(this).val() !=0){
$('#stockno').val($(this).val());
$('#producer').val($(this).attr('data-producer'));
}
});
</script>