jqueryで簡単な連動型ドロップダウンリストを作る

JavaScript

jqueryで簡単な連動型ドロップダウンリストを作る。

<!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">
<head>
  <title>簡単なドロップダウン</title>

  <script src="./js/jquery-1.3.2.js" type="text/javascript"></script>

  <script type="text/javascript">

     $(document).ready(function(){
		
		$("#parent").change(function () {
		
		//alert($("#parent").val());
		$("#child option").addClass('hide');
		$('#child .c_' + $("#parent").val()).removeClass("hide");
		
		
		}).trigger('change');

    });
    
  </script>

  <style type="text/css">
<!--
.hide {
	display: none;
}
-->
  </style>
</head>
<body>
  <form action="">
    <select id="parent">
      <option value="1">野菜</option>
      <option value="2">文房具</option>
    </select>
    <select id="child">
      <option class="c_1" value="1">すいか</option>
      <option class="c_1" value="2">キャベツ</option>
      <option class="c_1" value="3">人参</option>
      <option class="c_2" value="4">えんぴつ</option>
      <option class="c_2" value="5">ガン消し</option>
      <option class="c_2" value="6">ペン</option>
      <option class="c_2" value="7">下敷き</option>
    </select>
  </form>
</body>
</html>