HTML選択で選択した最初のオプションを常に表示するにはどうすればよいですか？

Question

私は選択メニューから任意のオプションを選択したときに何かを達成するために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は（私の場合に必要とされる）を選択し、メニューより、実際に小さいことがわかります最初のオプション{}と一致しますが、他のオプションを選択した場合は、テキストの大部分がカットされてしまいます。これは見栄えが悪いので、これを達成する方法を知るためにあなたの助けや助言が必要です。ありがとう。

Answer 1

あなたが設計しようとしている方法は間違っています。これは、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> 

Answer 2

感謝。しかし、私はここで私の問題の解決策を見つけました。今、私は各選択が行われた後にselectedIndex = 0になるjavascript関数を使用しています。ここ

は、コードは次のとおりです。

 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> 

おかげで再びみんな。