Bootstrap 4 - только для чтения - выберите раскрывающийся список

Question

Я отправляю компоненты в форме динамически через Ajax, и я хочу, чтобы компоненты ввода теряли свой стиль формы, когда пользователь нажимает кнопку добавления / сохранения.

Мне удалось это сделатьсо следующим при вводе простого текста $('#ingredientQuantity').attr('readonly', 'readonly').addClass('form-control-plaintext').removeClass('form-control');

Но выполнение того же с выбором не дает тот же результат.

Ниже приведен код:

<select required class="custom-select custom-select-lg" id="ingredientUnits">
  <option selected disabled>Select Units</option>
  <option>millilitres</option>
  <option>kilograms</option>
</select>

Есть ли способ сделать так, чтобы это выглядело просто как текст с помощью класса начальной загрузки или CSS?

Answer 1

Для достижения ожидаемого результата используйте нижеприведенную опцию события изменения, отображая выбранную опцию в теге p и скрывая, выберите

$('select').on('change', function(){
  $(this).css('display','none');
  $('.plainText').text($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select required class="custom-select custom-select-lg" id="ingredientUnits">
  <option selected disabled>Select Units</option>
  <option>millilitres</option>
  <option>kilograms</option>
</select>
<p class="plainText"></p>

пример кода для справки - https://codepen.io/nagasai/pen/ERWEmV