jQuery と CSS を組み合わせて美しい選択ドロップダウン メニューを作成

フォームをデザインするとき、選択ドロップダウン オプション コントロールを使用する必要がある場合があります。残念ながら、IE ブラウザのデフォルトの選択コントロールは非常に見栄えが悪く、スタイルで制御できず、画像やその他の情報も制御できません。オプションに追加されました。今日は、CSS と jQuery を使用して美しいドロップダウン オプション メニューを作成する方法を例を通して説明します。

XHTML

请选择城市长沙北京南京堪培拉多伦多

ご覧のとおり、div を使用してドロップダウン オプション コントロールのネイティブの選択タグを置き換えます。
CSS

#dropdown{width:186px; margin:80px auto; position:relative} 
#dropdown p{width:150px; height:24px; line-height:24px; padding-left:4px; padding-right:30px; 
border:1px solid #a9c9e2; background:#e8f5fe url(arrow.gif) no-repeat right 4px; 
color:#807a62; cursor:pointer} 
#dropdown ul{width:184px; background:#e8f5fe; margin-top:2px; border:1px solid #a9c9e2; 
position:absolute; display:none} 
#dropdown ul li{height:24px; line-height:24px; text-indent:10px} 
#dropdown ul li a{display:block; height:24px; color:#807a62; text-decoration:none} 
#dropdown ul li a:hover{background:#c6dbfc; color:#369}

スタイルについてはあまり話さないでください。CSS では背景色やフォントの色、さらにはその他の任意に定義したスタイルを変更できます。ドロップダウン矢印の付いた小さなアイコンが添付ファイルにパッケージされています。
jQuery
まず、「都市を選択してください」をクリックしたときに、ドロップダウン レイヤー「ul」が表示されているかどうかを確認します。表示されている場合はドロップダウン オプションを非表示にし、そうでない場合はドロップダウンを開きます (下にスライドさせます)。 -down オプション

$("#dropdown p").click(function(){ 
  var ul = $("#dropdown ul"); 
  if(ul.css("display")=="none"){ 
    ul.slideDown("fast"); 
  }else{ 
    ul.slideUp("fast"); 
  } 
});

次に、ドロップダウン オプションをクリックすると、オプションの内容を取得し、オプションの内容を

タグに書き込みますをクリックし、ドロップダウン オプションを非表示にします。

$("#dropdown ul li a").click(function(){ 
  var txt = $(this).text(); 
  $("#dropdown p").html(txt); 
  $("#dropdown ul").hide(); 
});

これで簡単なドロップダウン オプションの操作が完了しました。とても簡単ですね。
もちろん、背景を操作するときにオプションの値を取得する必要がある場合は、最初に XHTML を定義する必要があります。

请选择城市长沙北京南京堪培拉多伦多

コードからわかるように、a タグに rel 属性を追加して値を代入すると、select の option タグの値と同等になります。 。次のステップは、jQuery を介して rel 値を取得することです。コードを参照してください:

$("#dropdown ul li a").click(function(){ 
  var txt = $(this).text(); 
  $("#dropdown p").html(txt); 
  var value = $(this).attr("rel"); 
  $("#dropdown ul").hide(); 
  $("#result").html("您选择了"+txt+"，值为："+value); 
});

これで、完全なドロップダウン オプション操作が完了します。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。

【おすすめ関連チュートリアル】

1. JavaScript ビデオチュートリアル
2. JavaScript オンラインマニュアル
3.ブートストラップ チュートリアル