ここから本文です

JavaScriptで住所検索を作成する方法についてです。 1.ブラウザで検索条件を選...

kt5********さん

2017/4/2613:18:00

JavaScriptで住所検索を作成する方法についてです。

1.ブラウザで検索条件を選択・入力を行い
2.DBから検索を行い(DBはpostgesql9.4.10です。

サーブレット、jsp、beanを使用)
3.ブラウザに結果を返す
という感じのものを作成しようとしています。
現在は1で選択した内容をどのように取り出して検索のキーにするのかで困っています。
また入力欄にうっすら例を表示することも考えています。

基本的に今の構造を変えないで実行することは可能でしょうか?
以下ソースです。画像はこんな感じにしたいという妄想です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>住所検索</title>
</head>
<body>

<input type="radio" name="select" value="on">:住所検索<br>
<h4>住所から検索</h4>
<form action="#" id="form">
<label for="select1">都道府県:</label>
<select name="select1" id="select1">
<option value="">選択してください</option>
<option value="神奈川県">神奈川県</option>
<option value="東京都">東京都</option>
</select>
</div>
<div>
<label for="select2">市町村区:</label>
<select name="select2" id="select2">
<option value="">--</option>
</select>
</div>
<div>
<label for="select3">町名:</label>
</label>
<input type="text" size="20" name="select3" id="select3" placeholder="外神田">
<br>
<input type='submit' value='検索' onclick='return confirm("住所に一致する郵便番号を検索します");'/>

</div>
</form>
<script>
(function(){
document.addEventListener('DOMContentLoaded',function(){
var select2Choices={
'':['選択してください'],
'神奈川県':['川崎市川崎区','川崎市中原区','川崎市高津区','川崎市多摩区','川崎市宮前区','川崎市麻生区',
'横浜市保土ヶ谷区','横浜市神奈川区','横浜市青葉区','横浜市磯子区','横浜市金沢区','横浜市港北区',
'横浜市港南区','横浜市瀬谷区','横浜市戸塚区','横浜市都筑区','横浜市鶴見区','横浜市旭区','横浜市泉区',
'横浜市栄区','横浜市西区','横浜市中区','横浜市南区','横浜市緑区','相模原市中央区','相模原市緑区',
'相模原南市','伊勢原市','海老名市','小田原市','茅ヶ崎市','南足柄市','横須賀市','厚木市','綾瀬市',
'平塚市','鎌倉市','逗子市','三浦市','座間市','秦野市','大和市','湯河原町','愛川町','開成町','寒川町',
'中井町','二宮町','大磯町','松田町','葉山町','箱根町','山北町','清川村'],
'東京都':['未登録です'],
}
var select1=document.querySelector('#select1');
var select2=document.querySelector('#select2');
select1.addEventListner('change',function(event){
var choice=select2Choices[event.target.value];
for(var i=select2.length;i>=0;i--){
select2.remove(i);
}
choices.forEach(function (choice){
select2.add(new Option(choice,choice));
});
});
select1.dispatchhEvent(new Event('change'));
})();
</script>

<input type="radio" name="select" value="on" onclick="connecttext('textforselect',this.checked);" />:郵便番号検索<br>
<h4>郵便番号から検索</h4>
<form action="#" id="form">
<div>
<label for="select11">郵便番号:</label>
</label>
<input type="text" size="20" name="select11" id="select11" placeholder="101-0021">
<br>
<input type='submit' value='検索' onclick='return confirm("郵便番号に一致する住所を検索します");'/>
<br>
------------------------------------------------------------------------------------------------------------------------<br>
<検索結果>
</body>
</html>

補足また入力欄にうっすら例を表示することも考えています。
はソース上では実行できているので解決しています。

input type,label&amp;gt,option value,select11&amp;quot,option&amp;gt,&#39;select2&#39;,serializeArray

閲覧数:
109
回答数:
1
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

dot********さん

2017/5/210:42:46

まず、画面下の結果表示をどうするか決めるのが先決ですが、普通に考えるなら、Ajaxで検索パラメタを送信、結果をjsonで取得、整形して表示でしょうね。

そうすると、jQueryでは
$.ajax({
url : '/service/zipQuery',
dataType : 'json',
type : 'post',
data : { param:param },
success : function(data){ // UI反映 },
error : function(data){ // エラーアラート }
});

みたいなクエリになると思うので、変数paramに値をハメればいいいのです。

単純には、
var param = $('form').serializeArray(); 一発で、今の例なら
[
{ name:'select', value:'on' },
{ name:'select1', value:'東京都' },
{ name:'select2', value:'大田区' },
{ name:'select2', value:'蒲田' },
{ name:'select3', value:'蒲田銀座1丁目' }
]
のようなデータが取得できます。

この回答は投票によってベストアンサーに選ばれました!

あわせて知りたい

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる