勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

jQselectableでセレクトボックスをリッチにする

      2014/07/02

入力フォームみたいなもので元々はテキストボックス内に

都道府県を入れてもらうという項目があったけど、

 

使うほうからしたらイチイチ入力するのは面倒くさい、

かといってセレクトボックスだと北海道から大抵始まって

真ん中の方とか探しにくい。

 

そういうので見つけたのがjQselectable。

 

■サンプル

http://sample.taitan916.info/selectable/

 

■ソース

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="jqselectable/style/selectable/style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jqselectable/jqselectable.js"></script>
<script>
$(function(){
$("select").jQselectable();
});
</script>
<title>jQselectable</title>
</head>
<body>
<h1>jQselectable</h1>
<select id="pref_noapply" name="pref_noapply" class="">
<optgroup label="北海道">
<option value="01">北海道</option>
</optgroup>
<optgroup label="東北">
<option value="02">青森県</option>
<option value="03">岩手県</option>
<option value="04">宮城県</option>
<option value="05">秋田県</option>
<option value="06">山形県</option>
<option value="07">福島県</option>
</optgroup>
<optgroup label="関東">
<option value="08">東京都</option>
<option value="09">茨城県</option>
<option value="10">栃木県</option>
<option value="11">群馬県</option>
<option value="12">埼玉県</option>
<option value="13">千葉県</option>
<option value="14">神奈川県</option>
</optgroup>
<optgroup label="北陸">
<option value="15">富山県</option>
<option value="16">石川県</option>
<option value="17">福井県</option>
</optgroup>
<optgroup label="甲信越">
<option value="18">新潟県</option>
<option value="19">山梨県</option>
<option value="20">長野県</option>
</optgroup>
<optgroup label="東海">
<option value="21">岐阜県</option>
<option value="22">静岡県</option>
<option value="23">愛知県</option>
<option value="24">三重県</option>
</optgroup>
<optgroup label="関西">
<option value="25">滋賀県</option>
<option value="26">京都府</option>
<option value="27">大阪府</option>
<option value="28">兵庫県</option>
<option value="29">奈良県</option>
<option value="30">和歌山県</option>
</optgroup>
<optgroup label="中四国">
<option value="31">鳥取県</option>
<option value="32">島根県</option>
<option value="33">岡山県</option>
<option value="34">広島県</option>
<option value="35">山口県</option>
<option value="36">徳島県</option>
<option value="37">香川県</option>
<option value="38">愛媛県</option>
<option value="39">高知県</option>
</optgroup>
<optgroup label="九州">
<option value="40">福岡県</option>
<option value="41">佐賀県</option>
<option value="42">長崎県</option>
<option value="43">熊本県</option>
<option value="44">大分県</option>
<option value="45">宮崎県</option>
<option value="46">鹿児島県</option>
</optgroup>
<optgroup label="沖縄">
<option value="47">沖縄県</option>
</optgroup>
</select>
</dd>
</dl>
</body>
</html>

 - jQuery

  関連記事

jquery_logo
Ajaxの負荷対策

Ajaxを使ってボタンを押した際に表示を切り替える処理。 都度Ajaxを使ってた ...

jquery_logo
jQueryで画像を遅延ロードする(jquery.lazyload.js)

画像を遅延ロードさせたい時にはlazyloadが便利。 ■ダウンロード http ...

images
PHPとajaxでチャットの作成

■ソース ・index.php <? error_reporting(E_ ...

jquery_logo
bootstrap-datetimepickerについて

日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、 普通のセレクト ...

jquery_logo
FullCalendarでラベル毎に表示切替したい

Googleカレンダーだとページ左側にマイカレンダーというのがあり、その中に任意 ...

110126-HTML5_Logo
formでdisplay:none;にしてても送信される

formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...

jquery_logo
jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)

画像のスライダーを作る時に便利なプラグインであるbxslider。 簡単に使える ...

jquery_logo
jQueryで偶数or奇数行にclassを付与

やりたかった事は、 ・PHPは使えなくてjavascriptかjQueryを使用 ...

jquery_logo
jQueryでコンテンツのスライド

jQueryもしくはJavaScriptでリンクを押すと 右から左にコンテンツを ...

jquery_logo
画像をドラッグ&ドロップでアップロード

■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...