(function(){ 
     // CONSTANTS 
     var developerId = '3128dcb69c997d966cd3f3001e7c09ec'; // ※※ あなたのデベロッパーIDに変更してください ※※ 
     var affiliateId = '0a5f6eb1.601c3539.0a5f6eb2.56b95cf8'; // ※※ あなたのアフィリエイトIDに変更してください ※※ 
     var callBack = 'createAreaSelect'; 
     var operation = 'GetAreaClass'; 
     var version = '2009-03-26'; 
     var requestUrl = 'http://api.rakuten.co.jp/rws/2.0/json?'; 
     var param = []; 
     param.push('developerId='+developerId); 
     param.push('callBack='+callBack); 
     param.push('operation='+operation); 
     param.push('version='+version); 
     if(affiliateId) { 
          param.push('affiliateId='+affiliateId); 
     } 
     var scriptTag = document.createElement('script'); 
     scriptTag.src = requestUrl + param.join('&'); 
     document.body.appendChild(scriptTag); 
})(); 

var defaultMiddleArea = 'kanagawa'; 
var defaultSmallArea = 'hakone'; 
var rakutenTr_smallAreaData = new Array(); 
var rakutenTr_datailAreaData = new Array(); 

function createAreaSelect(data) { 
     var prefListTag = '<select id="middleClassCode" name="middleClassCode" onChange="setSmallArea()"><option value="">指定なし</option>'; 
     if(data.Header.Status == "Success") { 
          var middleClassList = data.Body.GetAreaClassInfo.largeClass.middleClass; 
          for(var i = 0; i < middleClassList.length; i++) { 
               var middleClassCode = middleClassList[i].middleClassCode; 
               var selected = ""; 
               if(middleClassCode == defaultMiddleArea) { 
                    selected = ' selected="selected"'; 
               } 
               prefListTag += '<option value="' + middleClassCode + '"' + selected + '>' + middleClassList[i].middleClassName + '</option>'; 
               rakutenTr_smallAreaData[middleClassCode] = middleClassList[i].smallClass; 
          } 
     } 
     document.getElementById('middleClassList').innerHTML = prefListTag; 
     if(defaultMiddleArea != null && defaultMiddleArea.length != 0) { 
          setSmallArea(); 
     } 
} 
function setSmallArea() { 
     var code = document.getElementById('middleClassCode').value; 
     var tag = '<select id="smallClassCode" name="smallClassCode" onChange="setDetailArea()"><option value="">指定なし</option>'; 
     if(code != null && code.length != 0) { 
          var smallClassList = rakutenTr_smallAreaData[code]; 
          for(var i = 0; i < smallClassList.length; i++) { 
               var selected = ""; 
               if(document.getElementById('smallClassCode') == null 
                         && smallClassList[i].smallClassCode == defaultSmallArea) { 
                    selected = ' selected="selected"'; 
               } 
               tag += '<option value="' + smallClassList[i].smallClassCode + '"' + selected + '>' + smallClassList[i].smallClassName + '</option>'; 
               if(smallClassList[i].detailClass != null) { 
                    var detailClassList = smallClassList[i].detailClass; 
                    rakutenTr_datailAreaData[smallClassList[i].smallClassCode] = detailClassList; 
               } else { 
                    document.getElementById('detailClassList').innerHTML = ""; 
               } 
          } 
          document.getElementById('smallClassList').innerHTML = tag; 
          document.getElementById('largeClassCode').value = "japan"; 
     } else { 
          document.getElementById('smallClassList').innerHTML = ""; 
     } 
} 
function setDetailArea() { 
     var code = document.getElementById('smallClassCode').value; 
     if(code != null && code.length != 0) { 
          var detailClassList = rakutenTr_datailAreaData[code]; 
          if(detailClassList != null) { 
               var tag = '<select id="detailClassCode" name="detailClassCode"><option value="">指定なし</option>'; 
               for(var j = 0; j < detailClassList.length; j++) { 
                    tag += '<option value="' + detailClassList[j].detailClassCode + '">' + detailClassList[j].detailClassName + '</option>'; 
               } 
               document.getElementById('detailClassList').innerHTML = tag; 
          } else { 
               document.getElementById('detailClassList').innerHTML = ""; 
          } 
     } 
}