htmlの選択（ドロップダウン）ボックスオプションが表示されないようにする方法

Question

私はonclickとonchangeイベントにアタッチしようとしていましたが、多くの成功を収めていませんでした。

最終的な目標は、divまたはulをオーバーレイし、ユーザーがクリックできるオプションを表示することです。選択ボックスのオプションが変更されます。これは可能ですか？

ここでいくつかのコードを試しました。非作業例を以下に見つけることができます：

http://jsfiddle.net/deostroll/Yed7p/1/

ドロップダウンのためのマークアップ：

$(function(){ 
    $('select').click(function(e){  
     var ul = document.createElement('ul'); 
     $(this).children().each(function(){ 
      var li = document.createElement('li'); 
      $(li).html($(this).text()); 
      $(li).data("value", $(this).val()); 
      $(ul).append(li); 
     }); 
     $('body').append(ul); 
     var cordinates = $(this).offset(); 
     $(ul).offset({top:cordinates.top + 10 + $(this).height(), left:cordinates.left}); 
     $(ul).show('slow'); 
     e.preventDefault(); 
    }); 
}); 

ここでの問題は、ときということである。ここでは

<select> 
    <option value="000">Select A Country</option> 
    <option value="001">India</option>  
    <option value="002">Australia</option>  
    <option value="003">United States Of America</option> 
    <option value="004">Great Britan</option> 
    <option value="005">Zimbabwe</option> 
    <option value="006">Newzeland</option>  
</select> 

はjavascriptのですドロップダウンをクリックすると、デフォルトでオプションが表示されます。私はそれを防止しようとしています。そして、私はGoogle Chromeのブラウザでこのすべての運動をしていた。後で私は他のブラウザもテストしようと考えています。私はこれを行うライブラリがあることを知っていますが、私はちょうど使用された技術を知りたがっています。

Answer 1

デフォルトの動作に固執することができますほとんど共通。たとえば、多くのデザイナーが独自のチェックボックスを作成し、そのフォーム上にある基礎となる<input type='checkbox'要素にJavaScriptでフックします。しかし、あなたのやり方は少し異常です。

select要素をdivまたはulにオーバーレイしないでください。単にdivやulをユーザーが見るものとして作成し、JavaScriptを使用してドロップダウンリストを真似しようとします。ユーザーがリスト内の任意の項目をクリックするたびに値を取得し、それに応じて選択値を設定します。

つまり、divまたはulをselectイベントにフックするのではなく、selectをdivまたはulのclickイベントと照合します。

Answer 2

AFAIK、それを行う方法はありません。あなたのベスト・ベットは、カスタム・ドロップダウン（プラグインまたは独自の実装）を使用することです。

究極の目標は、div要素またはULをオーバーレイし、ユーザーがクリックできるオプション を表示することです。これにより、 選択ボックスのオプションが変更されます。これは可能ですか？あなたがドロップダウンボックスの外観を変更する場合を除き

ところで、あなたの質問から、あなたは説明する手順は、HTMLフォームをより美しく作るための回避策で、ある