jQueryで2つのドロップダウンリストを連動させる方法

jQuery, プログラム

2015.04.23

つぶやく

はてブ

あとで

こんにちは、@Yuuです。

知人から受けた案件で、1つのドロップダウンリストを選択したら、もう1つのドロップダウンリストの要素を自動的に変更するということを行ったので、備考録も兼ねて記録しておきます。

やりたかったこと

上のイメージはちゃちゃっと作ってしまったのですが、やりたい事の感じは伝わるでしょうか？

1つ目のドロップダウンリストで、国名を選んだら、2つ目のドロップダウンリストでは、その国の都市だけが選択できるようになって欲しい。

ということをjQueryを使って制御してみたいと思います。

ちなみに、このようなプラグインは探せば豊富にあります。自分がやりたいことと合致するプラグインが見つかった人は、わざわざ自分で作るのではなく、そちらのプラグインを使った方が楽だと思います。

ただ、僕が今回やりたかったのがクラス名を使っての制御で、中々そのようなものが見つからなかったので自分でやっちゃった!(・ω<)て感じです。

Tips

このようなプルダウンを連動させることを「HierSelect」と言うそうです、知らんかった。

処理の記述

HTMLの準備

まず以下のようなHTMLファイルを用意します。

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
	<title>HierSelectテスト</title>
	<!-- jQueryをCDNを使って読み込む -->
	<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>

<body>
	<form action="" method="post">
	
		<p>国を選択して下さい</p>
		<select name="country">
			<option value="Japan" selected="selected" class="msg">1番目の要素を選択して下さい</option>
			<option value="Japan" class="japan">日本</option>
			<option value="America" class="America">アメリカ</option>
			<option value="Australia" class="Australia">オーストラリア</option>
		</select>
		
		<p>都市を選択して下さい</p>
		<select name="city">
			<option value="Japan" selected="selected" class="msg">都市を選択して下さい</option>
			<option value="Tokyo" class="japan">東京</option>
			<option value="Kyoto" class="japan">京都</option>
			<option value="Osaka" class="japan">大阪</option>
			<option value="NY" class="America">ニューヨーク</option>
			<option value="LA" class="America">ロサンゼルス</option>
			<option value="Sydney" class="Australia">シドニー</option>
		</select>
		
	</form>
	
	<script>
		//この中にドロップダウンリストを連動させるための
		//jQueryのコードを記述していきます。
	</script>
</body>
</html>

<!doctype html>

<head>

<title>HierSelectテスト</title>

</head>

<body>

<p>国を選択して下さい</p>

<option value="Japan" selected="selected" class="msg">1番目の要素を選択して下さい</option>

<option value="Australia" class="Australia">オーストラリア</option>

</select>

<p>都市を選択して下さい</p>

<option value="Japan" selected="selected" class="msg">都市を選択して下さい</option>

<option value="NY" class="America">ニューヨーク</option>

<option value="LA" class="America">ロサンゼルス</option>

</select>

</form>

//この中にドロップダウンリストを連動させるための

//jQueryのコードを記述していきます。

</script>

</body>

</html>

肝となるのはクラス名です。

今回の最終的な処理内容として、国名に付けたクラス名と、都市名のクラス名が同じものだけを残すという処理にしようと思います。

なので、例えば日本という国名に対して"japan"というクラス名をつけたら、日本の都市名にも"japan"というクラス名を付けて下さい。

またこのファイルではjQueryはCDNを使用しているので、このファイルをコピーして使う方は、実行する時に必ずインターネットに繋がる環境で実行して下さい。

jQueryの記述

今の状態だと、国名で「日本」を選択しても、都市名に「シドニー」、「ニューヨーク」が表示されてしまう非常にクレイジーな状態です。

まず、国名が変更されたら何かアクションを起こすようにしてみましょう。
SELECT要素が変更した時にjQueryを反応させるには$('select[name="country"]').change()のように記述します。

また、選択された要素を取得する場合は
$('select[name="country"] option:selected')のように記述します。

では、scriptタグ内にコードを記述していきます。

$(function() {
	
	// 国名が変更されたら発動
	$('select[name="country"]').change(function() {
		
		// 選択されている国のクラス名を取得
		var countyName = $('select[name="country"] option:selected').attr("class");
		console.log(countyName);
	})
})

$(function() {

// 国名が変更されたら発動

$('select[name="country"]').change(function() {

// 選択されている国のクラス名を取得

var countyName = $('select[name="country"] option:selected').attr("class");

console.log(countyName);

})

ここまで記述するとコンソール画面に選択された要素のクラス名が、"Japan"、"America"などというように表示されると思います。

次に、選択した国のクラス名と同じクラス名を持つ都市名だけを表示する処理を記述していきます。

$(function() {
	
	// 国名が変更されたら発動
	$('select[name="country"]').change(function() {
		
		// 選択されている国のクラス名を取得
		var countyName = $('select[name="country"] option:selected').attr("class");
		console.log(countyName);
		
		// 都市名の要素数を取得
		var count = $('select[name="city"]').children().length;
		
		// 都市名の要素数分、for文で回す
		for (var i=0; i<count; i++) {
			
			var city = $('select[name="city"] option:eq(' + i + ')');
			
			if(city.attr("class") === countyName) {
				// 選択した国と同じクラス名だった場合
				
				// 都市の要素を表示
				city.show();
			}else {
				// 選択した国とクラス名が違った場合
				
				// 都市の要素を非表示
				city.hide();
			}
		}
	})
})

$(function() {

// 国名が変更されたら発動

$('select[name="country"]').change(function() {

// 選択されている国のクラス名を取得

var countyName = $('select[name="country"] option:selected').attr("class");

console.log(countyName);

// 都市名の要素数を取得

var count = $('select[name="city"]').children().length;

// 都市名の要素数分、for文で回す

for (var i=0; i<count; i++) {

var city = $('select[name="city"] option:eq(' + i + ')');

if(city.attr("class") === countyName) {

// 選択した国と同じクラス名だった場合

// 都市の要素を表示

city.show();

}else {

// 選択した国とクラス名が違った場合

// 都市の要素を非表示

city.hide();

}

})

都市名が存在する分だけfor文で回し、もし都市のクラス名が選択された国名のクラス名と同じなら表示、そうでないのであれば非表示にするという処理を追加しました。

この状態だと国名を選んだ後、「都市名を選択して下さい」という文字が表示されなくなってしまいます。
また国名を変更した際に、前回選択した都市名が残ってしまいます。

そこで、国名を選択した際にも「都市名を選択して下さい」という要素を表示しつつ、強制的に「都市名を選択して下さい」という要素を表示するようにします。

$(function() {
	
	// 国名が変更されたら発動
	$('select[name="country"]').change(function() {
		
		// 選択されている国のクラス名を取得
		var countyName = $('select[name="country"] option:selected').attr("class");
		console.log(countyName);
		
		// 都市名の要素数を取得
		var count = $('select[name="city"]').children().length;
		
		// 都市名の要素数分、for文で回す
		for (var i=0; i<count; i++) {
			
			var city = $('select[name="city"] option:eq(' + i + ')');
			
			if(city.attr("class") === countyName) {
				// 選択した国と同じクラス名だった場合
				
				city.show();
			}else {
				// 選択した国とクラス名が違った場合
				
				if(city.attr("class") === "msg") {
					// 「都市名を選択して下さい」という要素だった場合
					
						city.show();  //「都市名を選択して下さい」を表示させる
						city.prop('selected',true);  //「都市名を選択して下さい」を強制的に選択されている状態にする
				} else {
					// 「都市名を選択して下さい」という要素でなかった場合
					
					city.hide();
				}
			}
		}
	})
})