如何始终显示在 HTML Select 中选择的第一个选项？答案

【问题标题】：How to always show the first option as selected in HTML Select?如何始终显示在 HTML Select 中选择的第一个选项？
【发布时间】：2016-12-04 18:26:29
【问题描述】：

我有一个 HTML 选择，当我从选择菜单中选择任何选项时，它不应该在框中显示那些选定的选项，而是必须始终显示第一个选项，无论用户从里面的选项。这是我的 div 和 Select 的 CSS 代码：

   .styled select {
        background: transparent;
        width: 140px;
        font-size: 16px;
        border: 1px solid #ccc;
        height: 34px;
    }

    .styled {
        width: 40px;
        height: 34px;
        border: 1px solid #46b8da;
        border-radius: 3px;
        overflow: hidden;
        background-color: #5bc0de;
    } 

  <div class="styled">
     <select id="drpInsertMerge" onchange="drpChanged(this);">
            <option selected>{}</option>
            <option value="Phone Number">Phone Number</option>
            <option value="Email Address">Email Address</option>
            <option value="Given Name">Given Name</option>
            <option value="Family Name">Family Name</option>
            <option value="Display Name">Display Name</option>
      </select>
  </div>

在这里，从上面的代码中，您可以看到下拉框或 div 实际上小于与第一个选项 {} 匹配的选择菜单（在我的情况下是必需的），但如果我选择了任何其他选项下面的大部分文字都被剪掉了，这不是很好看，这就是为什么我需要你的帮助或建议来了解如何实现这一点。谢谢。

【问题讨论】：

这 a) 不容易实现，b) 根本不推荐。你试图以完全错误的方式解决问题。改为调整布局。
我认为要实现您想要的，您需要创建另一个表示下拉列表的元素。然后隐藏你原来的选项元素
剪切选择的原因是溢出：隐藏；对于周围的 div。你可以省略这个吗？您可以将 .styled div 设置为 40px，将 select 设置为 100%

标签： javascript jquery html css

【解决方案1】：

感谢大家抽出宝贵时间阅读我的问题并提出宝贵建议。但在这里我找到了解决我的问题的方法。现在，我正在使用一个 javascript 函数，该函数将在每次选择后使 selectedIndex = 0。

代码如下：

        function drpChanged(ddl) {
        var drpInsertMerge = document.getElementById("drpInsertMerge");

        var selectedText = drpInsertMerge.options[drpInsertMerge.selectedIndex].innerHTML;
        var selectedValue = drpInsertMerge.value;

        drpInsertMerge.selectedIndex = 0;

        return false;
    }

  <select id="drpInsertMerge" onchange="drpChanged(this);">
        <option selected>{}</option>
        <option value="Phone Number">Phone Number</option>
        <option value="Email Address">Email Address</option>
        <option value="Given Name">Given Name</option>
        <option value="Family Name">Family Name</option>
        <option value="Display Name">Display Name</option>
  </select>

再次感谢大家。

【讨论】：

【解决方案2】：

您的设计方式是错误的。这可能是增加 CSS 样式类宽度的一种方式。

  .styled select {
    background: transparent;
    width: 500px;
    font-size: 16px;
    border: 1px solid #ccc;
    height: 34px;
}

.styled {
    width: 300px;
    height: 34px;
    border: 1px solid #46b8da;
    border-radius: 3px;
    overflow: hidden;
    background-color: #5bc0de;
} 

  <div class="styled">
 <select id="drpInsertMerge" onchange="drpChanged(this);">
        <option selected>{}</option>
        <option value="Phone Number">Phone Number</option>
        <option value="Email Address">Email Address</option>
        <option value="Given Name">Given Name</option>
        <option value="Family Name">Family Name</option>
        <option value="Display Name">Display Name</option>
  </select>

【讨论】：