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

问题描述：

我有一个HTML选择，我想要实现的东西，当我从选择菜单中选择任何选项时，它不应该显示那些选中的选项，而是必须始终显示第一个选项，无论用户从选项中选择内。下面是DIV我的CSS代码，并选择：如何始终显示HTML选择中的第一个选项？

.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）根本不推荐。你试图以完全错误的方式解决问题。改为调整你的布局。 – connexo

我认为要实现你想要的，你需要创建另一个代表下拉列表的元素。然后隐藏您的原始选项元素 – Kebeng

切割选择的原因是溢出：隐藏;为周围的div。你可以省略这个吗？您可以将.styled div设置为40px，将select选为100％ –

答

你打算设计的方式是错误的。这可能是一种增加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>

再次感谢大家。

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

相关推荐