メニューを表示せずにクリック時に選択ドロップダウンメニュー全体を非表示にする

Question

クリックイベントでドロップダウンメニュー全体を非表示にしようとしていますが、少し遅延があり、分割メニューが表示されます。 メニューを一切表示せずに非表示にしたい。

のいずれかにそれが可能です：

• クリックですべてでメニューを表示しない

OR

• は、クリックでメニューを表示せずに全体の選択ボックスを非表示にします

喜んでJavaScriptまたはjQueryを使用してください。

HTML

<select> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
</select> 

jQueryの

$(document).ready(function(){ 
    $(document).on("click","select",function(){ 
     $(this).hide(); 
    }); 
}); 

現在のコードは次のとおりです。 https://jsfiddle.net/La9mnfhc/1/

Answer 1

あなたはオプションを非表示にしたり、自分自身を選択したい場合は、マウスオーバーであなたのような何かを行うことができます。

$(document).ready(function(){ 
    $(document).on("mouseover","select",function(){ 
    $(this).find('option').hide();//hide options 
    $(this).hide();//hide select itself 
    }); 
}); 

しかし、クリックイベントを使用したい場合、selectの 'click'イベントは 'change'イベントのようなものになります。

Answer 2

あなたは単純なトリックを行うだけで、ページの読み込み時にデフォルトで非表示にしておき、必要に応じて選択後に表示させることができます。 select要素のhtmlの属性としてstyle="display:none"を追加し、その後にshow()にしてください。