jQuery select2插件是否支持在下拉列表中具有其他行颜色的功能? [英] Does jquery select2 plugin support the ability to have alternative row colors in the dropdown list?

问题描述

我有一个下拉列表，正在使用 Select2 jquery插件，该插件效果很好.

I have a dropdown list and I am using the Select2 jquery plugon which works great.

我遇到的一件事是用例，其中每个项目都很长，因此文本换成3或4行.我想看看是否可以设置下拉菜单的样式，使其具有其他行颜色，以便在向下滚动项目列表时更容易查看一个项目的结束位置和另一个项目的开始位置.

One thing i ran into is a use case where each of the items is very long so the text wraps to 3 or 4 lines. I wanted to see if you can style the dropdowns to have alternative row color to make it easier to see where one item ends and another begins when you are scrolling down the list of items.

这可能吗?

推荐答案

是的，实际上，这很容易，这是您可以做到的:

Yes, it's possible, in fact it's quite easy, this is how you do it:

在CSS样式表中，为您想要以其他颜色显示的项目创建一个类，例如:

In your css stylesheet create a class for the items that you want to display in a different color, for instance:

.oddRow {background-color:#CCC;}

然后将该类添加到要在调用select2之前以其他颜色显示的option元素中，如下所示:

Then add that class to the option elements that you want to be displayed in a different color before the call to select2, like this:

$(document).ready(function() { 
  $("#source optgroup option:odd").addClass('oddRow');
  $("#source").select2();
});

请参见此柱塞或嵌入的代码段中的一个有效示例.

See a working example in this Plunker or in the embed snippet bellow.

$(document).ready(function() { 
  $("#source optgroup option:odd").addClass('oddRow');
  $("#source").select2();
});

.oddRow {background-color:#CCC;}

    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link data-require="select2@*" data-semver="3.5.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.css" />
    <script data-require="select2@*" data-semver="3.5.0" src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.js"></script>

<select style="width:300px" id="source">
      <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
      </optgroup>
      <optgroup label="Pacific Time Zone">
        <option value="CA">California</option>
        <option value="NV">Nevada</option>
        <option value="OR">Oregon</option>
        <option value="WA">Washington</option>
      </optgroup>
      <optgroup label="Mountain Time Zone">
        <option value="AZ">Arizona</option>
        <option value="CO">Colorado</option>
        <option value="ID">Idaho</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NM">New Mexico</option>
        <option value="ND">North Dakota</option>
        <option value="UT">Utah</option>
        <option value="WY">Wyoming</option>
      </optgroup>
      <optgroup label="Central Time Zone">
        <option value="AL">Alabama</option>
        <option value="AR">Arkansas</option>
        <option value="IL">Illinois</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="OK">Oklahoma</option>
        <option value="SD">South Dakota</option>
        <option value="TX">Texas</option>
        <option value="TN">Tennessee</option>
        <option value="WI">Wisconsin</option>
      </optgroup>
      <optgroup label="Eastern Time Zone">
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="IN">Indiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="OH">Ohio</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WV">West Virginia</option>
      </optgroup>
    </select>

这篇关于jQuery select2插件是否支持在下拉列表中具有其他行颜色的功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！