样式化选择下拉菜单

Question

我正试图在下面的屏幕截图中将我的相关选择下拉列表样式化，但我无法弄清楚如何。

请问有人知道这个网站是如何做到的吗？

Answer 1

select代码无法使用CSS轻松自定义。因此，我们通常需要隐藏原始select并创建一个将使用CSS和JS自定义的新元素。

例如，给定以下select：

<select class="Dropdown">
    <option value="1">Category 1</option>
    <option value="2">Category 2</option>
    <option value="3">Category 3</option>
    <option value="4">Category 4</option>
    <option value="5">Category 5</option>
    <option value="6">Category 6</option>
    <option value="7">Category 7</option>
    <option value="8">Category 8</option>
    <option value="9">Category 9</option>
    <option value="10">Category 10</option>
</select>

首先，我们隐藏原始select：

var dropdown = $('.Dropdown').hide();

然后，我们创建一个新的div元素，并将其附加到我们的页面：

var newDropdown = $('<div/>') // create new div element
    .addClass('NewDropdown') // with class NewDropdown
    .appendTo(document.body); // and append it to page

对于原始option中的每个select，我们会在新的下拉列表中创建一个元素。

dropdown.find('option').each(function(index, element){
    var option = $(element); // this is the option from the original select
    var newOption = $('<div/>') // create new div element
        .addClass('NewDropdown-item') // with class NewDropdown-item
        .html(option.html()) // copy content from original option
        .data('value', option.val()) // copy value from original option
        .on('click', onClicked) // add a click listener
        .appendTo(newDropdown); // append it to the new dropdown
});

为方便起见，我们将新创建的下拉项存储在变量中：

var newDropdownOptions = newDropdown.find('.NewDropdown-item');

点击新下拉列表中的某个项目后，我们会将其标记为已选中并设置原始select的值。

function onClicked(){
    newDropdownOptions.removeClass('is-selected'); // deselect all items
    var clickedOption = $(this); // wrap clicked option in jquery
    clickedOption.addClass('is-selected'); // add class to mark clicked option as selected
    dropdown.val(clickedOption.data('value')); // set original select's value
};

JSFiddle链接：https://jsfiddle.net/Lhrmcouz/