tkhr-ssk/easyselectbox-dynamic.html

## easyselectbox-dynamic.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>easyselectbox sample</title>
	<link rel="stylesheet" type="text/css" media="screen" href="easyselectbox/easyselectbox.css" />
	<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />

	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="easyselectbox/easyselectbox.min.js"></script>
  <script>
$(function(){
  $('#item').easySelectBox({classNames:{selectbox:"esb-item"}, onClick: updateSelectBox});
  $('#size').easySelectBox({classNames:{selectbox:"esb-size"}, onClick: updateText});
});

function updateSelectBox(data){
  var arr = {
    shirt : [
      {val:"S", txt:"S"},
      {val:"M", txt:"M"},
      {val:"L", txt:"L"}
    ],
    socks : [
      {val:"24", txt:"24"},
      {val:"26", txt:"26"},
      {val:"28", txt:"28"}
    ]};

  $('#size').empty();
  if(arr[data.value]){
    arr[data.value].forEach(function(v) {
      $("#size").append($("<option></option>", {value: v.val, text: v.txt}));
    });
  }
  $('.esb-size').remove();
  $('#size').easySelectBox({classNames:{selectbox:"esb-size"}, onClick: updateText});
  updateText();
};

function updateText(){
  var item = $('#item option:selected').text();
  var size = $('#size option:selected').text();
  if(item) {
    $('#msg').text('現在選択しているのは、'+item+'のサイズ'+size+'です');
  } else {
    $('#msg').text('');
  }
}
</script>
</head>
<body>
<div id="wrapper">
  <h1>Easy Select Box</h1>
  <form id="form1" method="post" action="">
  <div class="entry-example">
    <h2>Example Dynamic List</h2>
    <label for="item">Item:</label>
    <select name="item" id="item">
      <option></option>
      <option value="shirt">シャツ</option>
      <option value="socks">靴下</option>
    </select>
    <label for="size">Size:</label>
    <select id="size"></select>
  </div>
  </form>
  <p id="msg"></p>
</div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title>easyselectbox sample</title>
	<link rel="stylesheet" type="text/css" media="screen" href="easyselectbox/easyselectbox.css" />
	<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />

	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="easyselectbox/easyselectbox.min.js"></script>
	<script>
	$(function(){
	$('#item').easySelectBox({classNames:{selectbox:"esb-item"}, onClick: updateSelectBox});
	$('#size').easySelectBox({classNames:{selectbox:"esb-size"}, onClick: updateText});
	});

	function updateSelectBox(data){
	var arr = {
	shirt : [
	{val:"S", txt:"S"},
	{val:"M", txt:"M"},
	{val:"L", txt:"L"}
	],
	socks : [
	{val:"24", txt:"24"},
	{val:"26", txt:"26"},
	{val:"28", txt:"28"}
	]};

	$('#size').empty();
	if(arr[data.value]){
	arr[data.value].forEach(function(v) {
	$("#size").append($("<option></option>", {value: v.val, text: v.txt}));
	});
	}
	$('.esb-size').remove();
	$('#size').easySelectBox({classNames:{selectbox:"esb-size"}, onClick: updateText});
	updateText();
	};

	function updateText(){
	var item = $('#item option:selected').text();
	var size = $('#size option:selected').text();
	if(item) {
	$('#msg').text('現在選択しているのは、'+item+'のサイズ'+size+'です');
	} else {
	$('#msg').text('');
	}
	}
	</script>
	</head>
	<body>
	<div id="wrapper">
	<h1>Easy Select Box</h1>
	<form id="form1" method="post" action="">
	<div class="entry-example">
	<h2>Example Dynamic List</h2>
	<label for="item">Item:</label>
	<select name="item" id="item">
	<option></option>
	<option value="shirt">シャツ</option>
	<option value="socks">靴下</option>
	</select>
	<label for="size">Size:</label>
	<select id="size"></select>
	</div>
	</form>
	<p id="msg"></p>
	</div>
	</body>
	</html>