时间戳

首页 > 解决方案 > Bootstrap 4 - 只读纯文本 - 选择下拉菜单

javascript - Bootstrap 4 - 只读纯文本 - 选择下拉菜单

问题描述

我正在通过 Ajax 动态提交表单中的组件，并且我希望输入组件在用户单击添加/保存按钮时丢失其表单样式。

我已经设法在纯文本输入上使用以下内容$('#ingredientQuantity').attr('readonly', 'readonly').addClass('form-control-plaintext').removeClass('form-control');

但是对 select 做同样的事情并没有相同的结果。

以下是代码：

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

有没有办法让它看起来只是带有引导类或 CSS 的纯文本？

标签： javascriptjquerytwitter-bootstrapbootstrap-4

解决方案

To achieve expected result, use below option of on change event and displaying selected option in p tag and hiding select

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

code sample for reference - https://codepen.io/nagasai/pen/ERWEmV

推荐阅读