【Javascript】도도부현에서 노선명과 역명을 취득하는 방법
아티팩트
이러한 느낌으로 도도부현을 선택하면, 노선명을 취득해,
노선명을 선택하면 역명을 취득합니다.
촬영 철의 매칭 사이트라든지 지도 사이트라든지에 사용할 수 있다고 생각했습니다.
환경
・Windows10
· Google 크롬
· VScode
· HeartRails Express
코드
index.html<body>
<table>
<tr>
<th>都道府県</th>
<td>
<select id="pref">
<option value="">都道府県を選択してください</option>
</select>
</td>
</tr>
<tr>
<th>路線名</th>
<td>
<select id="line">
<option value="">路線を選択してください</option>
</select>
</td>
</tr>
<tr>
<th>駅名</th>
<td>
<select id="station">
<option value="">駅を選択してください</option>
</select>
</td>
</tr>
</table>
</body>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function () {
//初期設定
var pref = $('#pref'); //都道府県のIDタグを取得
var line = $('#line'); //路線のIDタグを取得
var station = $('#station'); //駅名のIDタグを取得
//最初に都道府県を読み込む
$.getJSON('http://express.heartrails.com/api/json?method=getPrefectures&callback=?',function (json) {
$.each(json.response.prefecture,function (key,value) {
var text = String(this); //都道府県が配列で返ってきたので文字列に変換
pref.append('<option value="'+text+'">'+text+"</option>");
});
});
//都道府県から路線を検索
pref.on('change',function () {
$.getJSON('http://express.heartrails.com/api/json?method=getLines&callback=?',
{prefecture:pref.val()},
function (json) {
line.children().not(':first').remove();//「選択してください」のみ残して削除
station.children().not(':first').remove();
$.each(json.response.line,function (key,value) {
var text = String(this);
line.append('<option value="'+text+'">'+text+"</option>");
});
});
});
//路線から駅名を検索
line.on('change',function () {
$.getJSON('http://express.heartrails.com/api/json?method=getStations&callback=?',
{line:line.val()},
function (json) {
station.children().not(':first').remove();//「選択してください」のみ残して削除
$.each(json.response.station,function (key,value) {
if (this.prefecture == pref.val()) {
var text = String(this.name);
station.append('<option value="'+text+'駅">'+text+"駅</option>")
}
})
})
})
});
</script>
기본은 친숙한 getJSON 메소드로 WebAPI를 취득!
도도부현을 선택하지 않으면 노선명을 취득할 수 없는,
노선명을 선택하지 않으면 역명을 선택할 수 없게 하는 것을 실현하기 위해
getJSON 메소드의 제 2 인수에 노선에는 도도부현을, 역명에는 노선의 JSON 데이터를 지정하고 있습니다.
선택한 것은 append 메소드에 의해 option 태그에 표시되어 이용되고 있습니다.
Reference
이 문제에 관하여(【Javascript】도도부현에서 노선명과 역명을 취득하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Ryutaro-Hirasawa/items/ef80dd21214733a7ee44
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
・Windows10
· Google 크롬
· VScode
· HeartRails Express
코드
index.html<body>
<table>
<tr>
<th>都道府県</th>
<td>
<select id="pref">
<option value="">都道府県を選択してください</option>
</select>
</td>
</tr>
<tr>
<th>路線名</th>
<td>
<select id="line">
<option value="">路線を選択してください</option>
</select>
</td>
</tr>
<tr>
<th>駅名</th>
<td>
<select id="station">
<option value="">駅を選択してください</option>
</select>
</td>
</tr>
</table>
</body>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function () {
//初期設定
var pref = $('#pref'); //都道府県のIDタグを取得
var line = $('#line'); //路線のIDタグを取得
var station = $('#station'); //駅名のIDタグを取得
//最初に都道府県を読み込む
$.getJSON('http://express.heartrails.com/api/json?method=getPrefectures&callback=?',function (json) {
$.each(json.response.prefecture,function (key,value) {
var text = String(this); //都道府県が配列で返ってきたので文字列に変換
pref.append('<option value="'+text+'">'+text+"</option>");
});
});
//都道府県から路線を検索
pref.on('change',function () {
$.getJSON('http://express.heartrails.com/api/json?method=getLines&callback=?',
{prefecture:pref.val()},
function (json) {
line.children().not(':first').remove();//「選択してください」のみ残して削除
station.children().not(':first').remove();
$.each(json.response.line,function (key,value) {
var text = String(this);
line.append('<option value="'+text+'">'+text+"</option>");
});
});
});
//路線から駅名を検索
line.on('change',function () {
$.getJSON('http://express.heartrails.com/api/json?method=getStations&callback=?',
{line:line.val()},
function (json) {
station.children().not(':first').remove();//「選択してください」のみ残して削除
$.each(json.response.station,function (key,value) {
if (this.prefecture == pref.val()) {
var text = String(this.name);
station.append('<option value="'+text+'駅">'+text+"駅</option>")
}
})
})
})
});
</script>
기본은 친숙한 getJSON 메소드로 WebAPI를 취득!
도도부현을 선택하지 않으면 노선명을 취득할 수 없는,
노선명을 선택하지 않으면 역명을 선택할 수 없게 하는 것을 실현하기 위해
getJSON 메소드의 제 2 인수에 노선에는 도도부현을, 역명에는 노선의 JSON 데이터를 지정하고 있습니다.
선택한 것은 append 메소드에 의해 option 태그에 표시되어 이용되고 있습니다.
Reference
이 문제에 관하여(【Javascript】도도부현에서 노선명과 역명을 취득하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Ryutaro-Hirasawa/items/ef80dd21214733a7ee44
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<body>
<table>
<tr>
<th>都道府県</th>
<td>
<select id="pref">
<option value="">都道府県を選択してください</option>
</select>
</td>
</tr>
<tr>
<th>路線名</th>
<td>
<select id="line">
<option value="">路線を選択してください</option>
</select>
</td>
</tr>
<tr>
<th>駅名</th>
<td>
<select id="station">
<option value="">駅を選択してください</option>
</select>
</td>
</tr>
</table>
</body>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function () {
//初期設定
var pref = $('#pref'); //都道府県のIDタグを取得
var line = $('#line'); //路線のIDタグを取得
var station = $('#station'); //駅名のIDタグを取得
//最初に都道府県を読み込む
$.getJSON('http://express.heartrails.com/api/json?method=getPrefectures&callback=?',function (json) {
$.each(json.response.prefecture,function (key,value) {
var text = String(this); //都道府県が配列で返ってきたので文字列に変換
pref.append('<option value="'+text+'">'+text+"</option>");
});
});
//都道府県から路線を検索
pref.on('change',function () {
$.getJSON('http://express.heartrails.com/api/json?method=getLines&callback=?',
{prefecture:pref.val()},
function (json) {
line.children().not(':first').remove();//「選択してください」のみ残して削除
station.children().not(':first').remove();
$.each(json.response.line,function (key,value) {
var text = String(this);
line.append('<option value="'+text+'">'+text+"</option>");
});
});
});
//路線から駅名を検索
line.on('change',function () {
$.getJSON('http://express.heartrails.com/api/json?method=getStations&callback=?',
{line:line.val()},
function (json) {
station.children().not(':first').remove();//「選択してください」のみ残して削除
$.each(json.response.station,function (key,value) {
if (this.prefecture == pref.val()) {
var text = String(this.name);
station.append('<option value="'+text+'駅">'+text+"駅</option>")
}
})
})
})
});
</script>
Reference
이 문제에 관하여(【Javascript】도도부현에서 노선명과 역명을 취득하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Ryutaro-Hirasawa/items/ef80dd21214733a7ee44텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
