タグ

セレクトボックス

複数選択セレクトボックス(最大3つ)

削除時に確認メッセージ

グループ分け

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

  • files
  • js
  • html
<link href="<PATH>/selectize.default.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/selectize.min.js"></script>
<script>
    $(window).load(function(){
		$('#selectizeDemo01').selectize({
			persist: false,
			createOnBlur: true,
			create: true
		});
		
		$('#selectizeDemo02').selectize({
			create: true,
			sortField: {
				field: 'text',
				direction: 'asc'
			},
			dropdownParent: 'body'
		});
		$('#selectizeDemo03').selectize({
			maxItems: 3
		});
		$('#selectizeDemo04').selectize({
			create: true,
			persist: false,
			onDelete: function(values) {
				return confirm(values.length > 1 ? + values.length + 'を消していいですか?' : values[0] + 'を消していいですか?');
			}
		});
		$('#selectizeDemo05').selectize({
			sortField: 'text'
		});
    });
</script>
<div class="selectize-box">
	<p class="title">タグ</p>
	<div class="control-group">
		<input type="text" id="selectizeDemo01" class="demo-default" value="awesome,neat">
	</div>
</div>

<div class="selectize-box">
	<p class="title">セレクトボックス</p>
	<div class="control-group">
		<select id="selectizeDemo02" class="demo-default" placeholder="Select a person...">
			<option value="">Select a person...</option>
			<option value="4">Thomas Edison</option>
			<option value="1">Nikola</option>
			<option value="3">Nikola Tesla</option>
			<option value="5">Arnold Schwarzenegger</option>
		</select>
	</div>
</div>

<div class="selectize-box">
	<p class="title">複数選択セレクトボックス(最大3つ)</p>
	<div class="control-group">
		<select id="selectizeDemo03" name="state[]" class="demo-default" placeholder="Select a state..." multiple>
			<option value="">Select a state...</option>
			<option value="AL">Alabama</option>
			<option value="AK">Alaska</option>
			<option value="AZ">Arizona</option>
			<option value="AR">Arkansas</option>
			<option value="CA" selected>California</option>
			<option value="CO">Colorado</option>
			<option value="CT">Connecticut</option>
			<option value="DE">Delaware</option>
			<option value="DC">District of Columbia</option>
			<option value="FL">Florida</option>
			<option value="GA">Georgia</option>
			<option value="HI">Hawaii</option>
			<option value="ID">Idaho</option>
			<option value="IL">Illinois</option>
			<option value="IN">Indiana</option>
			<option value="IA">Iowa</option>
			<option value="KS">Kansas</option>
			<option value="KY">Kentucky</option>
			<option value="LA">Louisiana</option>
			<option value="ME">Maine</option>
			<option value="MD">Maryland</option>
			<option value="MA">Massachusetts</option>
			<option value="MI">Michigan</option>
			<option value="MN">Minnesota</option>
			<option value="MS">Mississippi</option>
			<option value="MO">Missouri</option>
			<option value="MT">Montana</option>
			<option value="NE">Nebraska</option>
			<option value="NV">Nevada</option>
			<option value="NH">New Hampshire</option>
			<option value="NJ">New Jersey</option>
			<option value="NM">New Mexico</option>
			<option value="NY">New York</option>
			<option value="NC">North Carolina</option>
			<option value="ND">North Dakota</option>
			<option value="OH">Ohio</option>
			<option value="OK">Oklahoma</option>
			<option value="OR">Oregon</option>
			<option value="PA">Pennsylvania</option>
			<option value="RI">Rhode Island</option>
			<option value="SC">South Carolina</option>
			<option value="SD">South Dakota</option>
			<option value="TN">Tennessee</option>
			<option value="TX">Texas</option>
			<option value="UT">Utah</option>
			<option value="VT">Vermont</option>
			<option value="VA">Virginia</option>
			<option value="WA">Washington</option>
			<option value="WV">West Virginia</option>
			<option value="WI">Wisconsin</option>
			<option value="WY" selected>Wyoming</option>
		</select>
	</div>
</div>

<div class="selectize-box">
	<p class="title">削除時に確認メッセージ</p>
	<div class="control-group">
		<input type="text" id="selectizeDemo04" class="demo-default" value="awesome,neat,yeah">
	</div>
</div>

<div class="selectize-box">
	<p class="title">グループ分け</p>
	<div class="control-group">
		<select id="selectizeDemo05" class="demo-default" multiple>
			<option value="">Select...</option>
			<optgroup label="Group 1">
				<option value="a">Item A</option>
				<option value="b">Item B</option>
			</optgroup>
			<optgroup label="Group 2">
				<option value="a">Item A</option>
				<option value="b">Item B</option>
			</optgroup>
		</select>
	</div>
</div>

selectizeについて

selectizeは、inputボックス、selectボックスなどの入力ボックスの使い勝手を向上してくれるプラグインです。
見た目もなんパターンか用意されており、かなり色々な機能があるので少しでも入力によるストレスを減らして離脱を防ぎましょう!
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • Picker

    Picker

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

  • DependentSelects

    DependentSelects

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

  • DropKick

    DropKick

    セレクトボックスの見た目をリッチに

  • Ranger

    Ranger

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

  • ClearableTextField

    ClearableTextField

    入力フォームに文字を入力すると文字削除用のボタンを表示