html - Styled-Select下拉，定位选项框

Question

我有这个样式选择下拉菜单，它只显示所有现有选项中的 5 个选项:

<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;
    }

我希望它像这张图片一样，我的意思是当我单击主框以选择一个选项时，选项窗口从主选择框的下方开始打开:

但这就是发生的事情，它与主窗口重叠:

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>

注意同一页面中的多个select。在此演示中，索引大于 5 的所有 select 项都将不可见。

如果你想在特定的选择中隐藏这些选项，你可以添加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(这是要求)的解决方案(有点 pache)。

思路是:

1. 按钮 以保持所选值并且将通过点击显示/隐藏选择。
2. select size=5 默认隐藏，当用户点击按钮时切换。
3. 在第一次点击时，将显示选择。
4. 在第二次点击时，选择将再次隐藏并且所选值将由按钮中的文本显示。

演示:由于未知原因，此代码片段现在无法使用，因此您可以在此 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>