Skip to content

Instantly share code, notes, and snippets.

@tatsuosakurai

tatsuosakurai/3select_box.html

Created April 25, 2011 06:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tatsuosakurai/940236 to your computer and use it in GitHub Desktop.
Save tatsuosakurai/940236 to your computer and use it in GitHub Desktop.
Download ZIP
3連セレクトボックス
Raw
3select_box.html
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<body>
<select id="select1">
<option value="">-----</option>
<option value="00110">親さくらい</option>
<option value="00120">親たなか</option>
<option value="00130">親かい</option>
</select>
<select id="select2">
<option value="">-----</option>
<option value="11210">さくらい1</option>
<option value="12220">たなか1</option>
<option value="13230">かい1</option>
<option value="11240">さくらい2</option>
<option value="11250">さくらい3</option>
<option value="11260">さくらい4</option>
</select>
<select id="select3">
<option value="">-----</option>
<option value="21310">子さくらい</option>
<option value="22320">子たなか</option>
<option value="23330">子かい</option>
</select>
<script type="text/javascript">
var categories =[
{"name": "親さくらい", "value": "00110"},
{"name": "親たなか", "value": "00120"},
{"name": "親かい", "value": "00130"},
{"name": "さくらい1", "value": "11210"},
{"name": "たなか1", "value": "12220"},
{"name": "かい1", "value": "13230"},
{"name": "さくらい2", "value": "11240"},
{"name": "さくらい3", "value": "11250"},
{"name": "さくらい4", "value": "11260"},
{"name": "子さくらい", "value": "21310"},
{"name": "子たなか", "value": "22320"},
{"name": "子かい", "value": "23330"}
];
$(function(){
// 親となるselect_boxのid、その親の子にあたるselect_boxのid
function reset_select_box(parent, child){
var my_ctg_id = parent.val()[2] + '' + parent.val()[3];
child.empty();
$.each(categories,function(i,obj){
var parent_ctg_id = obj["value"][0] + '' + obj["value"][1];
if (parent_ctg_id == my_ctg_id){
child.append("<option value='"+obj["value"]+"'>"+obj["name"]+"</option>");
}
});
}
$('#select1').change(function(){
reset_select_box($('#select1'), $('#select2'));
reset_select_box($('#select2'), $('#select3'));
});
$('#select2').change(function(){
reset_select_box($('#select2'), $('#select3'));
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment