Установить значение параметра как Выбрать текст

Question

Нужна помощь

Мне нужна функция выбора, где

<select class="form-control">
<option value="4100">4100 : Mass Collections</option>
<option value="4200">4200 : Stole Fees</option>
<select>

сейчас я не хочу чтобы включить описание кода после выбора опции, это должен быть только код, отображаемый в поле выбора, например:

Я пробовал это Jquery script

$('select').change(function() {

   var code= $('option:selected',this).text().split(' : ');
   $('option:contains('+code[0]+')',this).val(code[0]);

})

, но каждый раз, когда я делаю эту проверку в выпадающем меню, опция полностью пропускает описание. Как мне это предотвратить.

заранее спасибо

Answer 1

Вы можете следовать идее этого ответа : добавлять описание только тогда, когда элемент имеет фокус:

$('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

Это лучшее, что я мог сделать.

$(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;
  });
});

Лучше проверить это с большим количеством опций,

<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>