如何将select下拉框的option选项改为列表项直接展示？

核心思路 #

直接替换原有<select>下拉结构为列表结构（可根据需求选<ul>/<li>或者纯<div>组），原有<option>上的选中逻辑、自定义属性、联动逻辑都可以复用，不需要改动底层数据遍历的逻辑。

方案1：纯静态展示（无交互需求） #

如果只需要把选项值罗列出来，不需要选择、联动功能，直接替换原有select块的代码即可：

<div class="attributes col-12 col-md-4 box">
  <label class="">{{ $attributes_data['option']['name'] }}</label>
  <div class="select-control">
    <!-- 替换select为ul列表 -->
    <ul class="attribute-list">
      @if(!empty($result['cart']))
        @php
          $value_ids = array();
          foreach($result['cart'][0]->attributes as $values){
             $value_ids[] = $values->options_values_id;
          }
        @endphp
          @foreach($attributes_data['values'] as $values_data)
            @if(!empty($result['cart']))
            <!-- 选中项加active类用于样式区分 -->
            <li class="@if(in_array($values_data['id'],$value_ids)) active @endif">
              {{ $values_data['value'] }}
              <!-- 如需展示价格可以自行加字段输出 -->
            </li>
            @endif
          @endforeach
        @else
          @foreach($attributes_data['values'] as $values_data)
              <li class="@if($values_data['is_default']) active @endif">
                {{ $values_data['value'] }}
              </li>
          @endforeach
        @endif
    </ul>
  </div> 
</div>

写完代码可以加几行自定义CSS调整列表样式即可。

方案2：保留选择+表单提交+联动功能 #

如果需要保留原来下拉的选择、触发getQuantity()联动、表单提交功能，只需要加隐藏input存选中值，给列表项绑定点击事件即可：

替换后的HTML/Blade代码 #

<div class="attributes col-12 col-md-4 box">
  <label class="">{{ $attributes_data['option']['name'] }}</label>
  <div class="select-control">
    <!-- 隐藏input和原来select的name保持一致，提交表单时用 -->
    <input type="hidden" name="{{ $attributes_data['option']['id'] }}" 
           class="currentstock attributeid_<?=$index++?>" 
           attributeid = "{{ $attributes_data['option']['id'] }}" id="attribute_{{ $attributes_data['option']['id'] }}">
    <ul class="attribute-selectable-list">
      @if(!empty($result['cart']))
        @php
          $value_ids = array();
          foreach($result['cart'][0]->attributes as $values){
             $value_ids[] = $values->options_values_id;
          }
        @endphp
          @foreach($attributes_data['values'] as $values_data)
            @if(!empty($result['cart']))
            <li 
              class="attribute-item @if(in_array($values_data['id'],$value_ids)) active @endif"
              attributes_value="{{ $values_data['products_attributes_id'] }}" 
              value="{{ $values_data['id'] }}" 
              prefix = '{{ $values_data['price_prefix'] }}'  
              value_price ="{{ $values_data['price']+0 }}"
            >
              {{ $values_data['value'] }}
            </li>
            @endif
          @endforeach
        @else
          @foreach($attributes_data['values'] as $values_data)
              <li 
                class="attribute-item @if($values_data['is_default']) active @endif"
                attributes_value="{{ $values_data['products_attributes_id'] }}" 
                value="{{ $values_data['id'] }}" 
                prefix = '{{ $values_data['price_prefix'] }}'  
                value_price ="{{ $values_data['price']+0 }}"
              >
                {{ $values_data['value'] }}
              </li>
          @endforeach
        @endif
    </ul>
  </div> 
</div>

配套JS逻辑 #

// 列表项点击事件
document.querySelectorAll('.attribute-item').forEach(item => {
  item.addEventListener('click', function() {
    // 同组内移除其他选中状态
    this.parentElement.querySelectorAll('.attribute-item').forEach(i => i.classList.remove('active'));
    // 给当前项加选中状态
    this.classList.add('active');
    // 给隐藏input赋值
    const attrId = this.closest('.select-control').querySelector('input[type=hidden]').getAttribute('attributeid');
    document.getElementById(`attribute_${attrId}`).value = this.getAttribute('value');
    // 触发原来的联动函数
    getQuantity();
  })
})

可选CSS示例 #

.attribute-selectable-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.attribute-item {
  padding: 8px 12px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 8px;
  cursor: pointer;
}
.attribute-item.active {
  border-color: #0d6efd;
  background-color: #e7f1ff;
  color: #0d6efd;
}

内容的提问来源于stack exchange，提问作者Christopher Nicholaus