ノーマル

デフォルトラベル

グループ化

リンク

コールバック

enable & disable

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

  • files
  • js
  • html
<link href="<PATH>/jquery.fs.selecter.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.fs.selecter.min.js"></script>
<script>
    $(window).load(function(){
		$('#SelecterDemo01, #SelecterDemo03, #SelecterDemo06').selecter();
		$('#SelecterDemo02').selecter({
			label: "Default Label"
		});
		$('#SelecterDemo04').selecter({
			links: true,
			external: true,
			label: "Select Link"
		});
		$('#SelecterDemo05').selecter({
			callback: selectCallback,
			label: "Select Number"
		});
		$('#Selecter #SelecterBtn').on('click', function(){
			var $ele = $('#SelecterDemo06');
			var $this = $(this);
			if($ele.is(':disabled')) {
				$ele.selecter('enable');
				$this.find('span').text('DISABLE');
			}
			else {
				$ele.selecter('disable');
				$this.find('span').text('ENABLE');
			}
		});
		
		function selectCallback(value, index) {
			$('#Selecter .current-value span').text(value + 'が選択されました');
		}
    });
</script>
<div class="Selecter-box">
	<p class="title">ノーマル</p>
	<select id="SelecterDemo01" name="selecter_basic">
		<option>One</option>
		<option>Two</option>
	</select>
</div>

<div class="Selecter-box">
	<p class="title">デフォルトラベル</p>
	<select id="SelecterDemo02" name="selecter_default">
		<option value="1">One</option>
		<option value="2">Two</option>
		<option value="3">Three</option>
		<option value="4">Four</option>
		<option value="5">Five</option>
		<option value="6">Six</option>
		<option value="7">Seven</option>
		<option value="8">Eight</option>
		<option value="9">Nine</option>
		<option value="10">ten</option>
	</select>
</div>


<div class="Selecter-box">
	<p class="title">グループ化</p>
	<select id="SelecterDemo03" name="selecter_basic">
		<optgroup label="Group One">
			<option value="1">One</option>
			<option value="2">Two</option>
			<option value="3">Three</option>
		</optgroup>
		<optgroup label="Group One">
			<option value="4">Four</option>
			<option value="5">Five</option>
			<option value="6">Six</option>
			<option value="7">Seven</option>
		</optgroup>
		<optgroup label="Group Three">
			<option value="8">Eight</option>
			<option value="9">Nine</option>
			<option value="10">Ten</option>
		</optgroup>
	</select>
</div>

<div class="Selecter-box">
	<p class="title">リンク</p>
	<select id="SelecterDemo04" name="selecter_links">
		<option value="http://google.com">Google Search</option>
		<option value="http://boingboing.com">BoingBoing</option>
		<option value="http://cnn.com">CNN News</option>
	</select>
</div>

<div class="Selecter-box">
	<p class="title">コールバック</p>
	<select id="SelecterDemo05" name="selecter_callback">
		<option value="One">One</option>
		<option value="Two">Two</option>
		<option value="Three">Three</option>
		<option value="Four">Four</option>
		<option value="Five">Five</option>
	</select>
	<p class="current-value"><span></span></p>
</div>

<div class="Selecter-box">
	<p class="title">enable & disable</p>
	<select id="SelecterDemo06" name="selecter_basic" disabled="disabled">
		<option value="1">One</option>
		<option value="2">Two</option>
		<option value="3">Three</option>
		<option value="4">Four</option>
		<option value="5">Five</option>
	</select>
	<button id="SelecterBtn" class="yellow"><span>ENABLE</span>にする</button>
</div>

Selecterについて

Selecterは、セレクトボックスの見た目、使い勝手を向上してくれるプラグインです。
とてもシンプルな分、使いやすくなっています。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • DependentSelects

    DependentSelects

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

  • Ranger

    Ranger

    スライダーで値を選択できるUIを簡単に設置できる

  • Stepper

    Stepper

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

  • Autosize

    Autosize

    テキストエリアの高さを入力内容に応じて動的に伸縮

  • Formly

    Formly

    簡単にフォームにきれいなスタイルを設定することができる