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> </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;
}