js控制select只读

<style>
  .readonly-select {
    background-color: #eee;
    pointer-events: none;
  }
</style>

<select class="readonly-select">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

<select id="mySelect">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

<script>
  document.getElementById('mySelect').disabled = true;
</script>

<select id="mySelect">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

<script>
  document.getElementById('mySelect').addEventListener('change', function(event) {
    event.preventDefault();
  });
</script>

<select id="mySelect" disabled>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>
<input type="hidden" id="hiddenSelect" name="selectedValue">

<script>
  document.getElementById('mySelect').addEventListener('change', function() {
    document.getElementById('hiddenSelect').value = this.value;
  });
</script>

.readonly-select {
  background-color: #eee;
  pointer-events: none;
  -webkit-appearance: none; /* 移除默认样式 */
  -moz-appearance: none;
  appearance: none;
  border: none;
}