layui select自定义选中的text值

Question

layui select自定义text值
题，选择时 select显示值1或值2，怎么选择值1时候，自定义内容如选值1，显示参数1

<select name="" lay-filter="bidding">
  <option value="11">值1</option>
  <option value="11">值2</option>
</select>

Answer 1

wlf2r 上午好☀️☀️☀️️
本答案参考通义千问

在layui的select组件中，如果你想实现选择某个值时显示自定义的内容，你可以通过JavaScript或者jQuery来动态设置<option>的innerText或textContent。以下是一个简单的解决方案：

1. HTML结构：

<select id="mySelect" lay-filter="bidding">
  <option value="11">默认文本1</option>
  <option value="22">默认文本2</option>
</select>

1. JavaScript（使用原生JavaScript）：

document.getElementById('mySelect').addEventListener('change', function() {
  var selectedValue = this.value;
  if (selectedValue === '11') {
    this.innerHTML = '选值1：参数1';
  } else {
    this.innerHTML = this.options[this.selectedIndex].innerText; // 或者 this.textContent
  }
});

1. JavaScript（使用jQuery）：

$('#mySelect').on('change', function() {
  var selectedValue = $(this).val();
  if (selectedValue === '11') {
    $(this).html('选值1：参数1');
  } else {
    $(this).html($(this).find('option:selected').text()); // 或者 $(this).html($(this).find('option:selected').html());
  }
});

1. CSS样式： 为了保持一致性和美观，你可能还需要调整选中项的样式，例如：

#mySelect option:checked {
  background-color: #ccc;
  color: black;
}

注意：在实际项目中，你可能需要将这些逻辑封装到一个方法中，并且确保在用户交互之前进行数据绑定，以防止意外的改变。