グループから1つだけ選択可能

グループから複数選択可能

1つだけ検索可能で、検索窓有り

複数選択可能で、検索窓有り

1つだけ選択可能で、選択不可の選択肢、最初から選択されている選択肢の設定が可能

複数選択可能で、選択不可の選択肢、最初から選択されている選択肢の設定が可能

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/chosen.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/chosen.jquery.min.js"></script>
<script>
	$(window).load(function(){
		$('.chosen-select').chosen();
	});
</script>
<div class="box clearfix">
	<div class="left-column">
		<p>グループから1つだけ選択可能</p>
		<select data-placeholder="Your Favorite Football Team" class="chosen-select">
			<option value=""></option>
			<optgroup label="NFC EAST">
				<option>Dallas Cowboys</option>
				<option>New York Giants</option>
				<option>Philadelphia Eagles</option>
				<option>Washington Redskins</option>
			</optgroup>
			<optgroup label="NFC NORTH">
				<option>Chicago Bears</option>
				<option>Detroit Lions</option>
				<option>Green Bay Packers</option>
				<option>Minnesota Vikings</option>
			</optgroup>	
		</select>
	</div>
	<div class="right-column">
		<p>グループから複数選択可能</p>
		 <select data-placeholder="Your Favorite Football Team" class="chosen-select" multiple>
            <option value=""></option>
            <optgroup label="NFC EAST">
              <option>Dallas Cowboys</option>
              <option>New York Giants</option>
              <option>Philadelphia Eagles</option>
              <option>Washington Redskins</option>
            </optgroup>
            <optgroup label="NFC NORTH">
              <option>Chicago Bears</option>
              <option>Detroit Lions</option>
              <option>Green Bay Packers</option>
              <option>Minnesota Vikings</option>
            </optgroup>
		</select>
	</div>
</div>


<div class="box clearfix">
	<div class="left-column">
		<p>1つだけ検索可能で、検索窓有り</p>
		<select data-placeholder="Choose a Country..." class="chosen-select">
			<option value=""></option>
			<option value="United States">United States</option>
			<option value="United Kingdom">United Kingdom</option>
			<option value="Afghanistan">Afghanistan</option>
			<option value="Aland Islands">Aland Islands</option>
		</select>
	</div>
	<div class="right-column">
		<p>複数選択可能で、検索窓有り</p>
		<select data-placeholder="Choose a Country..." class="chosen-select" multiple>
			<option value=""></option>
			<option value="United States">United States</option>
			<option value="United Kingdom">United Kingdom</option>
			<option value="Afghanistan">Afghanistan</option>
			<option value="Aland Islands">Aland Islands</option>
		</select>
	</div>
</div>


<div class="box clearfix">
	<div class="left-column">
		<p>1つだけ選択可能で、選択不可の選択肢、最初から選択されている選択肢の設定が可能</p>
		<select data-placeholder="Your Favorite Type of Bear" class="chosen-select">
            <option value=""></option>
            <option>American Black Bear</option>
            <option>Asiatic Black Bear</option>
            <option>Brown Bear</option>
            <option>Giant Panda</option>
            <option selected>Sloth Bear</option>
            <option disabled>Sun Bear</option>
            <option>Polar Bear</option>
            <option disabled>Spectacled Bear</option>
          </select>
	</div>
	<div class="right-column">
		<p>複数選択可能で、選択不可の選択肢、最初から選択されている選択肢の設定が可能</p>
		<select data-placeholder="Your Favorite Types of Bear" class="chosen-select" multiple>
			<option value=""></option>
			<option>American Black Bear</option>
			<option>Asiatic Black Bear</option>
			<option>Brown Bear</option>
			<option>Giant Panda</option>
			<option selected>Sloth Bear</option>
			<option disabled>Sun Bear</option>
			<option selected>Polar Bear</option>
			<option disabled>Spectacled Bear</option>
		</select>
	</div>
</div>

Chosenについて

Chosenは、セレクトボックスの見た目と機能をグレードアップするプラグインです。
様々なタイプのセレクトボックスをオプションで設定することができるので、幅広く使えます。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスl02
対応ブラウザ

関連するjQueryプラグイン

  • Picker

    Picker

    ラジオボタンやチェックボックスのスタイルをクールにしてくれる

  • Placeholders

    Placeholders

    IE6-9でplaceholderと同じ機能を実現する

  • DependentSelects

    DependentSelects

    セレクトボックスの選択に応じて、次のセレクトボックスの内容を動的に変更

  • fancyInput

    fancyInput

    入力フォームの文字入力をユニークな見た目、動作に変更

  • Stepper

    Stepper

    マウス操作で数字をカウントアップ、ダウンで入力させる