自定义NumberPicker -优化

Custom NumberPicker - optimization

本文关键字：优化 NumberPicker 自定义      更新时间：2023-09-26

我有这个NUMBERPICKER。但是我不希望框中的数字显示在section_room中，直到选中一个。在此之前，我想有一个backgroudImage(占位符)。

<div class="section_room">
  <select id="persons" type="text" placeholder="" onchange="hideIcon(this);">
    <option value="null">1</option>
    <option value="null">2</option>         
    <option value="null">3</option>
    <option value="null">4</option>
  </select>
</div>
    <script>
      function hideIcon(self) {
        self.style.backgroundImage = 'none';
      }
    </script>

#persons {
    background-image: url(../images/icn_person1_dark.png);
    background-size: 40% 80%;
    background-repeat: no-repeat;
    background-position: center;
}
select {
    float:right;
    width: 20%;
    height: 44px;
    color: #858585;
    font-size: 0.8725em;
    outline: none;
    font-family: 'Open Sans', sans-serif;
    background: #ffffff;
    border-color:darkgrey;
    border-style: solid;
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
}
select option {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

试试这个:

<option disabled selected value></option>

它将提供一个'空白'选择，直到有人选择一个可用的数字。

编辑:无所谓。选择选项中的图像是一个糟糕的主意。

查看这里:更新的JS提琴示例

完整的<select>应该是这样的:

<select id="persons" type="text" placeholder="" onchange="hideIcon(this);">
  <option disabled selected value></option>
  <option value="null">1</option>
  <option value="null">2</option>         
  <option value="null">3</option>
  <option value="null">4</option>
</select>

Select2插件的模板特性可以处理这个问题:Select2

相关文章：