Set Option Value as Select text - php

Question

Need assistance
I need to have a select function where as
<select class="form-control">
<option value="4100">4100 : Mass Collections</option>
<option value="4200">4200 : Stole Fees</option>
<select>
now I don't want to include the code description after selecting an option, it should be code only appearing on the select box like this.
I have tried this Jquery script
$('select').change(function() {
var code= $('option:selected',this).text().split(' : ');
$('option:contains('+code[0]+')',this).val(code[0]);
})
but every time I do this checking in dropdown the option omitted the description entirely. How do I prevent this.
thanks in advance

Answer 1

You can follow the idea of this answer: add the description only when the element have focus:
$('select').on("focus", function(s) {
for (var o of this.options) {
o.textContent = o.getAttribute('value') + ': ' + o.dataset.descr;
}
});
$('select').on("blur", function(s) {
for (var o of this.options) {
o.textContent = o.getAttribute('value');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control">
<option value="4100" data-descr="Mass Collections">4100</option>
<option value="4200" data-descr="Stole Fees">4200</option>
<select>

Answer 2

This is the best that I could do.
$(document).ready(function (){
$('select').change(function(s) {
for (var option of this.options) {
option.label = option.text;
};
this.selectedOptions[0].label = this.selectedOptions[0].value;
});
});
Better to check it with more options,
<select class="form-control">
<option value="4100">4100 : Mass Collections</option>
<option value="4200">4200 : Stole Fees</option>
<option value="4300">4300 : Something Else</option>
<select>