Question

我正在通过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的纯文本？

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

Bootstrap 4 - 只读纯文本 - 选择下拉列表

1 个答案: