ドロップダウンとして機能し、HTMLによるテキスト/選択の変更を防止します

Question

好奇心が強い、私はレスポンシブテーブル内の追加オプションとしてHTMLを使用しています。きれいなHTML/CSSのドロップダウンは、スクロール可能なレスポンステーブルの中にネストされているため機能しません。最良の解決策はHTML selectだけを使用することでしたが、実際のメニューオプション（Rename、Duplicate、Deleteなど）でプレースホルダテキスト（More）を変更するのではなく、テキストを変更する。基本的なCSSのドロップダウンが機能するように、基本的にはうまくいくと思います。思考？アイデア？

例： https://jsfiddle.net/gqh5at0u/

<select class="form-control"> 
    <option value="" disabled selected hidden>More</option> <!-- I want this to stay visible --> 
    <option>Rename</option> 
    <option>Duplicate</option> 
    <option disabled="disabled">----</option> 
    <option>Delete</option> 
</select> 

Answer 1

イベントをキャッチしたときにあなただけの値をリセットできます。

$('.form-control').on('change', function(evt) { 
 
    var select = $(this); 
 
    alert(select.val()); // do stuff 
 
    
 
    select.val('none'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="form-control"> 
 
    <option value="none" disabled selected hidden>More</option> <!-- I want this to stay visible --> 
 
    <option>Rename</option> 
 
    <option>Open in Editor</option> 
 
    <option>Duplicate</option> 
 
    <option>Shift Due Date</option> 
 
    <option>Copy from Section</option> 
 
</select>