▼プルダウンの選択を変更すると、クラス名によって関連付けられた連動プルダウンを生成します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery controlled Dependent (or Cascading) Select List 2 | 設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
function makeSublist(parent,child,isSubselectOptional,childVal){
$("body").append("<select style='display:none' id='"+parent+child+"'></select>");
$('#'+parent+child).html($("#"+child+" option"));
var parentValue = $('#'+parent).attr('value');
$('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone());
childVal = (typeof childVal == "undefined")? "" : childVal ;
$("#"+child+' option[@value="'+ childVal +'"]').attr('selected','selected');
$('#'+parent).change(
function(){
var parentValue = $('#'+parent).attr('value');
$('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone());
if(isSubselectOptional) $('#'+child).prepend("<option value='none'> -- Select -- </option>");
$('#'+child).trigger("change");
$('#'+child).focus();
}
);
}
$(function(){
makeSublist('child','grandsun', true, '');
makeSublist('parent','child', false, '1');
});
</script>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1><a href='http://www.ajaxray.com/blog/2007/11/08/jquery-controlled-dependent-or-cascading-select-list-2/'>jQuery controlled Dependent (or Cascading) Select List 2</a> | 設置サンプル</h1>
<p>▼プルダウンの選択を変更すると、クラス名によって関連付けられた連動プルダウンを生成します。</p>
<!-- CODE -->
<form action="#">
<select id="parent">
<option value="1">花</option>
<option value="2">動物</option>
</select>
<select id="child">
<option class="sub_1" value="1">バラ</option>
<option class="sub_1" value="2">ひまわり</option>
<option class="sub_1" value="3">チューリップ</option>
<option class="sub_2" value="4">牛</option>
<option class="sub_2" value="5">犬</option>
<option class="sub_2" value="6">猫</option>
<option class="sub_2" value="7">トラ</option>
</select>
<select id="grandsun">
<option class="sub_1" value="1">バラ type 1</option>
<option class="sub_1" value="2">バラ type 2</option>
<option class="sub_1" value="3">バラ type 3</option>
<option class="sub_2" value="1">ひまわり type 1</option>
<option class="sub_2" value="2">ひまわり type 2</option>
<option class="sub_3" value="1">チューリップ type 1</option>
<option class="sub_3" value="2">チューリップ type 2</option>
<option class="sub_4" value="1">牛 type 1</option>
<option class="sub_4" value="2">牛 type 2</option>
<option class="sub_4" value="3">牛 type 3</option>
<option class="sub_5" value="1">犬 type 1</option>
<option class="sub_5" value="2">犬 type 2</option>
<option class="sub_5" value="3">犬 type 3</option>
<option class="sub_5" value="4">犬 type 4</option>
<option class="sub_6" value="1">猫 type 1</option>
<option class="sub_6" value="2">猫 type 2</option>
<option class="sub_7" value="1">トラ type 1</option>
<option class="sub_7" value="2">トラ type 2</option>
<option class="sub_7" value="3">トラ type 3</option>
</select>
</form>
<!-- / CODE -->
</div>
</body>
</html>