プルダウン選択内容[select]によって次の選択を制限する

デモページへopen_in_new

JSを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="form.js"></script>

[form.js]JavaScript

//Searchform
$(function(){
	var selectarea = $("form select.prefecture");
	var selectward = $("form select.ward");
	$(selectward).attr("disabled","disabled");

	$(selectarea).change(function(){
　　var area = $(this).val();
		if(area == "13"){
		$(selectward).removeAttr("disabled");
	}else{
		$(selectward).attr("disabled","disabled").val("");
		}
	});
});

HTMl

<form action="" method="">
<table>
<tbody>
<tr>
<th class="question">エリアから選択</th>
<td><select class="prefecture" id="" name="">
<option selected="selected" value="">選択してください</option>
<option value="01">北海道</option>
<option value="02">青森県</option>
<option value="03">岩手県</option>
<option value="04">宮城県</option>
<option value="05">秋田県</option>
<option value="06">山形県</option>
<option value="07">福島県</option>
<option value="08">茨城県</option>
<option value="09">栃木県</option>
<option value="10">群馬県</option>
<option value="11">埼玉県</option>
<option value="12">千葉県</option>
<option value="13">東京都</option>
<option value="14">神奈川県</option>
<option value="15">新潟県</option>
<option value="16">富山県</option>
<option value="17">石川県</option>
<option value="18">福井県</option>
<option value="19">山梨県</option>
<option value="20">長野県</option>
<option value="21">岐阜県</option>
<option value="22">静岡県</option>
<option value="23">愛知県</option>
<option value="24">三重県</option>
<option value="25">滋賀県</option>
<option value="26">京都府</option>
<option value="27">大阪府</option>
<option value="28">兵庫県</option>
<option value="29">奈良県</option>
<option value="30">和歌山県</option>
<option value="31">鳥取県</option>
<option value="32">島根県</option>
<option value="33">岡山県</option>
<option value="34">広島県</option>
<option value="35">山口県</option>
<option value="36">徳島県</option>
<option value="37">香川県</option>
<option value="38">愛媛県</option>
<option value="39">高知県</option>
<option value="40">福岡県</option>
<option value="41">佐賀県</option>
<option value="42">長崎県</option>
<option value="43">熊本県</option>
<option value="44">大分県</option>
<option value="45">宮崎県</option>
<option value="46">鹿児島県</option>
<option value="47">沖縄県</option>
<option value="99">海外</option>
</select></td>
</tr>
<tr>
<th class="question">東京23区から選択</th>
<td><select class="ward" id="" name="">
<option selected="selected" value="">東京23区から選択</option>
<option value="13101">千代田区</option>
<option value="13102">中央区</option>
<option value="13103">港区</option>
<option value="13104">新宿区</option>
<option value="13105">文京区</option>
<option value="13106">台東区</option>
<option value="13107">墨田区</option>
<option value="13108">江東区</option>
<option value="13109">品川区</option>
<option value="13110">目黒区</option>
<option value="13111">大田区</option>
<option value="13112">世田谷区</option>
<option value="13113">渋谷区</option>
<option value="13114">中野区</option>
<option value="13115">杉並区</option>
<option value="13116">豊島区</option>
<option value="13117">北区</option>
<option value="13118">荒川区</option>
<option value="13119">板橋区</option>
<option value="13120">練馬区</option>
<option value="13121">足立区</option>
<option value="13122">葛飾区</option>
<option value="13123">江戸川区</option>
<option value="0">その他</option>
</select></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" value="検索する" name="" id="" class="btn"></td>
</tr>
</tbody>
</table>
</form>

CSS

.mod_search form {
  margin: 0 0 100px 0;
  background-color: #FFFFFF;
  border-bottom: 1px solid #999999;
  border-top: 2px solid #999999;
}
.mod_search form table {
  width: 100%;
}
.mod_search form table th {
  padding: 20px;
  font-weight:bold;
  color:#000;
  vertical-align: top;
  border-bottom: 1px solid #999999;
}
.mod_search form table td {
  padding: 20px;
  vertical-align: top;
  border-bottom: 1px solid #999999;
}
.mod_search form select {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: solid 1px #CCCCCC;
  width: 80%;
  padding: 7px;
}
.mod_search form input.btn {
 padding:5px;
  border: none;
  cursor: pointer;
  background-color:#2BA6CB;
  color: #FFF;
  font-weight: bold;
  width: 300px;
  text-align: center;
}