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

<强>演示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

更新

显然，您无法在Mac OS上使用css隐藏option代码，因此在这种情况下我建议使用像select2这样的插件

＆＃13;

＆＃13;

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

＆＃13;

select {
  width:100%;  
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

关于同一页面中多个select的

请注意。在此演示中，索引大于5的所有选项都将不可见。

如果您想在特定选择中隐藏这些选项，可以向其添加class并添加此类的选择器。

<强>演示：

＆＃13;

＆＃13;

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

＆＃13;

select {
  width:100%;  
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

更新2

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

这个想法是：

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

<强>演示： 由于未知原因，此代码段现在无法正常工作，因此您可以在此bin中看到效果

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

$('select').change(function(){
  var sel = $(this).hide();
  $('#text-holder').html(sel.val());
}).trigger('change');
＆＃13;
.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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

我尝试了你的代码并意识到你的预期输出不需要。

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

上面显示的语句可以删除，并且工作正常。