样式化下拉选择框，定位选项框。

Question

我有一个样式化的下拉选择框，其中仅显示所有现有选项中的五个选项：

<div style="background:grey; height:400px; width: 400px;">
   <div class="styled-select">
      <select id="campaignListId" name="campaignId" onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=0;' onblur="this.size=0;">
          <option value="1">First</option>
          <option value="2">Second</option>
          <option value="3">Third</option>
          <option value="4">Fourth</option>
          <option value="5">Fifth</option>
          <option value="6">Sixth</option>
          <option value="7">Seventh</option>
      </select>
  </div>
</div>

以下是我的CSS代码：

    .styled-select select {
        position: absolute;
        background: transparent;
        width: 200px;
        padding-top: 5px;
        font-size: 32px;
        font-weight: bold;
        font-family: 'PT Sans', sans-serif;
        color: #4F9DD0;
        line-height: 1;
        border: 0;
        border-radius: 4;
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        z-index: 2;
    }

    .styled-select {
        background: url(resources/img/campaignSelector.png) no-repeat right #ddd;
        background-color: white;
        width: 200px;
        height: 50px;
        position: relative;
        margin: 0 auto;
    }

    .styled-select option {
        font-size: 20px;
        background-color: white;
    }

我希望它能像这张图片一样，也就是当我点击主框以选择一个选项时，选项窗口从下方打开：

但事实上会出现以下情况，导致主窗口被覆盖：

- ReshaD

---

@divix 当然可以，但是我更倾向于不使用任何插件。 - ReshaD

Answer 1

问题出在你的脚本中。

onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=0;' onblur="this.size=0;"

因此，您可以将其删除并仅使用CSS隐藏额外选项：

options:nth-child(n+6) {
   display:none;
}

演示：

.styled-select select {
  position: absolute;
  background: transparent;
  width: 200px;
  padding-top: 5px;
  font-size: 32px;
  font-weight: bold;
  font-family: 'PT Sans', sans-serif;
  color: #4F9DD0;
  line-height: 1;
  border: 0;
  border-radius: 4;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  z-index: 2;
}

.styled-select {
  background: url(resources/img/campaignSelector.png) no-repeat right #ddd;
  background-color: white;
  width: 200px;
  height: 50px;
  position: relative;
  margin: 0 auto;
}

.styled-select option {
  font-size: 20px;
  background-color: white;
}

option:nth-child(n+6) {
  display:none;  
}

<div style="background:grey; height:400px; width: 400px;">
   <div class="styled-select">
      <select id="campaignListId" name="campaignId" >
          <option value="1">First</option>
          <option value="2">Second</option>
          <option value="3">Third</option>
          <option value="4">Fourth</option>
          <option value="5">Fifth</option>
          <option value="6">Sixth</option>
          <option value="7">Seventh</option>
      </select>
  </div>
</div>

更新

显然，在Mac OS中无法使用CSS隐藏option标签，因此在这种情况下，我建议使用插件，例如select2。

$('select').select2({
  minimumResultsForSearch: Infinity  
});

select {
  width:100%;  
}

.select2-results__options li:nth-child(n+6) {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>

<div style="background:grey; height:400px; width: 400px;">
  <div class="styled-select">
    <select id="campaignListId" name="campaignId" >
      <option value="1">First</option>
      <option value="2">Second</option>
      <option value="3">Third</option>
      <option value="4">Fourth</option>
      <option value="5">Fifth</option>
      <option value="6">Sixth</option>
      <option value="7">Seventh</option>
    </select>
  </div>
</div>

请注意同一页面中的多个标签。在此演示中，索引大于5的所有选项都将不可见。 如果您想隐藏特定中的这些选项，则可以为其添加class并添加该类的选择器。

演示：

var con = $('select').select2({
  minimumResultsForSearch: Infinity
}).data('select2').$results.addClass("wrap");

select {
  width:100%;  
}

.wrap.select2-results__options li:nth-child(n+6) {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>

<div style="background:grey; height:400px; width: 400px;">
  <div class="styled-select">
    <select id="campaignListId" name="campaignId" >
      <option value="1">First</option>
      <option value="2">Second</option>
      <option value="3">Third</option>
      <option value="4">Fourth</option>
      <option value="5">Fifth</option>
      <option value="6">Sixth</option>
      <option value="7">Seventh</option>
    </select>
  </div>
</div>

更新2

另一个解决方案（有点缓慢），不需要插件，但使用javascript（这是要求）。

思路如下：

1. 按钮用于保留所选值并且通过点击显示/隐藏选择器。
2. 选择器默认情况下隐藏，并在用户单击按钮时切换，大小为5。
3. 第一次单击时，将显示选择器。
4. 第二次单击时，选择器将再次隐藏并且所选值将成为按钮中的文本。

Demo: For unknown reason this snippet doesn't work right now, so you can see the effect in this bin

$('button').click(function() {
  $('select').toggle();
});

$('select').change(function(){
  var sel = $(this).hide();
  $('#text-holder').html(sel.val());
}).trigger('change');

.wrapper {
  cursor:pointer;
  position:relative;
  display:inline-block;
}

select {
  display:none;
  position:absolute;
  left:0;
  width:100%;
}

button {
  text-align:left;
}

#text {
  border:1px solid;
  width:120px;
}

.arrow {
  float:right;
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div class="wrapper">
  <button id="text"> 
    <span id="text-holder"></span>
    <span class="arrow">▼</span>
  </button>
  <select size="5">
    <option selected>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
  </select>
</div>

- Mosh Feu

---

我不知道这个.. 你为什么一开始要删除那些 option？ - Mosh Feu

因为我想只显示所有现有选项中的五个选项。 - ReshaD

所以我看不到其他选择，只能使用插件。 - Mosh Feu

所以如果有人有解决方案，我会等待，顺便说一句，如果您建议相关插件，我将不胜感激。 - ReshaD

但是这个也完全不显示其他选项，只显示其中的5个。非常感谢您的努力 :) - ReshaD

Answer 2

我尝试了你的代码，发现有一些不必要的东西，对于你期望的输出来说。

onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=0;' onblur="this.size=0;"

可以删除上述语句，程序仍然可以正常运行。

- Mohan Goud

---

正如我之前提到的，我想仅显示所有现有选项中的5个选项，而您引用的部分是指此功能。 - ReshaD