Javascript 如何始终显示HTML选择中选定的第一个选项？

我有一个HTML选择，当我从选择菜单中选择任何选项时，它不应该在框中显示那些选择的选项，而是必须始终显示第一个选项，无论用户从选项中选择了什么。 这是我的div 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实际上比select菜单小，在我的例子中，select菜单需要与第一个选项{}匹配但是如果我从下面选择了任何其他选项，那么大部分文本都被剪切了，这不好看，这就是为什么我需要你的帮助或建议来知道如何实现这一点。谢谢。

您将要设计的方式是错误的。这可能是在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>

---

感谢大家花时间阅读我的问题和提出宝贵的建议。但在这里我找到了解决问题的办法。现在，我正在使用一个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>

---

再次感谢各位。

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