如何将选择选项转换为可点击链接区域？

Question

查看摘要或fork from CodePen

＆＃13;

＆＃13;

<select 
    data-drupal-selector="edit-field-video-theme-target-id" 
    id="edit-field-video-theme-target-id" 
    name="field_video_theme_target_id" 
    class="form-select"
  >
  <option value="All" selected="selected">- Tout -</option>
  <option value="9">A*midex</option>
  <option value="11">Bibliothèque</option>
  <option value="10">Relation entreprise</option>
  <option value="8">Université</option>
</select>

＆＃13;

＆＃13;

＆＃13;

我如何以这种方式主题：

是否可以在css中使用？

Answer 1

您不能像这样设置<option>标记的样式，但您可以使用select来创建链接到此选择标记的其他元素。

这与Select2的作用类似：

＆＃13;

＆＃13;

$(document).ready(function() {
  $("[data-selectlist]").each(function() {
    //$(this).hide();  //Uncomment this
    var $ul = $("<ul/>", {
      'class': 'selectlist'
    });
    $ul.data('select', $(this));
    $(this).find('option').each(function() {
      var $li = $("<li/>", {
        'class': 'selectlist-option',
        'data-value': $(this).val(),
        'text': $(this).text()
      });
      $ul.append($li);
    });
    $(this).after($ul);
    $ul.on('click', '.selectlist-option', function() {
      var $selectlist = $(this).closest('.selectlist');
      $selectlist.find('.selectlist-option').removeClass('active');
      $(this).addClass('active');
      $($selectlist.data('select')).val($(this).data('value'));
    })
  });
})

＆＃13;

.selectlist {
  list-style: none;
  padding-left: 0;
  display: inline-block;
}

.selectlist .selectlist-option {
  padding: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.selectlist .selectlist-option.active {
  background: #0fc0fc;
}

.selectlist .selectlist-option:hover {
  background: #0fd0fd;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-selectlist data-drupal-selector="edit-field-video-theme-target-id" id="edit-field-video-theme-target-id" name="field_video_theme_target_id" class="form-select">
      <option value="All" selected="selected">- Tout -</option>
      <option value="9">A*midex</option><option value="11">Bibliothèque</option>
      <option value="10">Relation entreprise</option>
      <option value="8">Université</option>
</select>

＆＃13;

＆＃13;

＆＃13;

Codepen链接：https://codepen.io/anon/pen/geGQvR