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検索で渡すといった感じのスクリプトを教えてください。

回答の条件
  • 1人5回まで
  • 登録:2007/05/25 00:07:31
  • 終了:2007/05/28 22:13:55

ベストアンサー

id:jack_sonic No.2

じゃっくそにっく回答回数123ベストアンサー獲得回数252007/05/25 13:08:46

ポイント50pt

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

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

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>
id:tsune2279

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

光が見えました。

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

2007/05/25 16:22:00

その他の回答(1件)

id:jack_sonic No.1

じゃっくそにっく回答回数123ベストアンサー獲得回数252007/05/25 01:28:16

ポイント50pt

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

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>
id:tsune2279

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

試してみます。

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

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

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

2007/05/25 02:04:52
id:jack_sonic No.2

じゃっくそにっく回答回数123ベストアンサー獲得回数252007/05/25 13:08:46ここでベストアンサー

ポイント50pt

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

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

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>
id:tsune2279

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

光が見えました。

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

2007/05/25 16:22:00

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません