人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jacascriptで
<script> function gettext(form){ var a = form.item1.value; var b = form.item2.value; var c = form.item3.value; form.elements['search'].value = a+' AND '+b+' AND '+c; } </script> <form method="get" action="http://www.×××.com/mt-search.cgi" onsubmit="gettext(this)"> <label for="search" accesskey="4">絞込み検索</label><br /> <input type="hidden" name="search" value=""></input><select name="item1"/> <option value="都道府県">都道府県</option> <option value="東京都">東京都</option> <option value="神奈川県">神奈川県</option> </select> <select name="item2"/> <option value="市区町村">市区町村</option> <option value="大田区">大田区</option> <option value="品川区">品川区</option> </select> <select name="item3"/> <option value="分類">分類</option> <option value="マンション">マンション</option> <option value="アパート">アパート</option> </select> <input type="submit" value="検索"></input> </form>
こんな感じで選択するとand検索になるようにしたいのですが、項目を選択すると自動的に次の項目が絞り込まれるようにしたいです。例えば都道府県を選択するとその県の市区町村が出る。そして最後はフォームにデータをand検索で渡すといった感じのスクリプトを教えてください。

●質問者: tsune2279
●カテゴリ:ウェブ制作
✍キーワード:elements gettext アパート スクリプト データ
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● じゃっくそにっく
●50ポイント

*実行サンプルページ・解説をこちらのページに設置しました。

JavaScript/住所選択(検索)ができるフォーム(Ajax) - ジャックズラボ jack's Lab

実行サンプルページ直リンク

http://f29.aaa.livedoor.jp/~morg/wiki/sample/addrajax.html

*JavaScriptだけでやるということなので、住所選択用の部品(addrajax)を使って実現しています。

膨大な量の市区町村、町域データもついていてるので、絞込みしてくれます。

addrajax↓

ADDRAjax - Ajaxによる住所ドリルダウン検索

フィールドは、pref(都道府県),city(市区町村),area(町域)です。

サンプルをいじってみて読んでください。


質問文にあわせた応用をしてこんな感じです。

<html>
<title>住所選択ドリルダウン応用サンプル</title>
<head>
<script src="addrajax/prototype.js"></script>
<script src="addrajax/addrajax.js" charset="UTF-8"></script>
<script>
<!--
// 住所検索ドリルダウン初期化用コード
 Event.observe(window,'load',function(){
 var dd = new ADDRAjax( 'pref', 'city', 'area' );
// 住所が選択されるたびに呼び出される関数の設定
 dd.onChange = function (pref,city,area) {
 // alert( pref+" "+city+" "+area );
 };

// 初期化
 dd.init();
// デフォルトの住所を設定するときはこれを使う
// dd.setAddress('千葉県','千葉市中央区','弁天');

 });
//--></script>
</head>
<body>

<form method="get" action="http://www.×××.com/mt-search.cgi" onsubmit="gettext(this)">

<select name="pref"><option value="">↓(都道府県)</option></select>
<select name="city"><option value="">↓(市区町村)</option></select>
<select name="area"><option value="">↓(町域)</option></select>
<select name="bunrui"/> 
<option value="分類">分類</option> 
<option value="マンション">マンション</option>
<option value="アパート">アパート</option> 
</select> 
<input type="submit" value="検索"></input> 
</form>


<script>
function gettext(form){ 
var a = form.pref.value; // 都道府県
var b = form.city.value; // 市区町村
var c = form.area.value; // 町域
var d = form.bunrui.value; // 分類
// ANDでつなげる
form.elements['search'].value = a+' AND '+b+' AND '+c + ' AND ' + d; 
} 

</script>



</body>
</html>
◎質問者からの返答

親切な解説ありがとうございます。

試してみます。

試したらすばらしかったです。

ところで地名ではなく、商品とかでしたらどうやるのでしょうか?

当方あまり知識がないです。


2 ● じゃっくそにっく
●50ポイント ベストアンサー

いくつかの分類・商品名など、住所のように選択肢が膨大でない場合に、

動的に選択ボックスの内容を変化させるサンプルと動作サンプルを

Wikiに設置しました。

JavaScript/select選択ボックスを動的に作る - ジャックズラボ jack's Lab

配列を用意することと、

フォームのselectオブジェクトのoptionsプロパティを

いじることで実現できます。

少しスクリプトを出すとこんな感じです。

<html>
<title>JavaScript:動的選択ボックス作成サンプル</title>
<head>
</head>
<body>
動的選択ボックス作成サンプル : 商品編 <br>
 
<form name="form1" method="get" action="http://f29.aaa.livedoor.jp/~morg/wiki/sample/disp_send.php" onsubmit="gettext(this)">
<!-- set name and onChange -->
<select name="sel_bunruiA" onChange="selectBunruiA(this)" width="100px"><option value="">(種類)</option></select>
<select name="sel_bunruiB" width="100px"><option value="">(品名)</option></select>
<input type="submit" value="検索"></input> 
<input type="hidden" name="search" value=""></input>
</form>
 
<script type="text/javascript" language="JavaScript">
<!--
 // 最初の分類リスト (分類Aリスト)を定義
 var bunruiA = new Array("野菜","果物","肉","魚");
 
 // 次の分類(分類Aごとの分類Bリスト)を定義
 var bunruiB = new Array();
 bunruiB["野菜"]= new Array("じゃがいも","にんじん","ピーマン");
 bunruiB["果物"]= new Array("スイカ(1/4)","オレンジ","いちご");
 bunruiB["肉"] = new Array("豚肉(100g)","牛肉(100g)","羊肉(100g)");
 bunruiB["魚"] = new Array("サンマ(1尾)","アジ(1尾)","しらす(小パック)");
 
 // 分類Aの選択リストを作成
 createSelection( form1.elements['sel_bunruiA'], "(種類)", bunruiA, bunruiA);
 
 ////////////////////////////////////////////////////
 //
 // 選択ボックスに選択肢を追加する関数
 // 引数: ( selectオブジェクト, value値, text値)
 function addSelOption( selObj, myValue, myText )
 {
 selObj.length++;
 selObj.options[ selObj.length - 1].value = myValue ;
 selObj.options[ selObj.length - 1].text = myText;
 
 }
 /////////////////////////////////////////////////////
 //
 // 選択リストを作る関数 
 // 引数: ( selectオブジェクト, 見出し, value値配列 , text値配列 )
 //
 function createSelection( selObj, midashi, aryValue, aryText )
 {
 selObj.length = 0;
 addSelOption( selObj, midashi, midashi);
 // 初期化
 for( var i=0; i < aryValue.length; i++)
 {
 addSelOption ( selObj , aryValue[i], aryText[i]);
 }
 }
 ///////////////////////////////////////////////////
 //
 // 分類Aが選択されたときに呼び出される関数
 //
 function selectBunruiA(obj)
 {
 // 選択肢を動的に生成
 createSelection(form1.elements['sel_bunruiB'], "(品名)", 
 bunruiB[obj.value], bunruiB[obj.value]);
 
 }
 /////////////////////////////////////////////////
 // submit前の処理
 function gettext(form){ 
 var a = form1.sel_bunruiA.value; // 分類1
 var b = form1.sel_bunruiB.value; // 分類2
 // ANDでつなげる
 form1.elements['search'].value = a+' AND '+b;
 alert(form1.elements['search'].value );
 } 
 
//-->
</script>
◎質問者からの返答

大変ありがとうございます。

光が見えました。

はてなに初めて質問を出しましたが、出してよかったです。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ