ヘアスタイルをサイト内で絞り込み検索させたいと思っております。

質問

ヘアスタイルをサイト内で絞り込み検索させたいと思っております。
下記のサイトのような感じです。

http://salon.yahoo.co.jp/hairstyle/
http://www.vi-vi-vi.com/style/
http://style.ispot.jp/

１、検索フォームで検索開始
２、検索結果（ヘアスタイル画像）。画像をクリック
３、ヘアスタイル詳細ページ

というようなものをと思っております。（php,javascript,データベースの有無などなど）
しかしながらどのようにしたらよいのか分からず、質問させていただきました。
カテゴリーもjavascriptの個所でよいのかもわかりませんでした。
どのような手法が良いか、また、このようなシステムを制作していただけるところをごぞんじでしたら
ご紹介していただけると助かります。

回答No.4

yyr446 · ベストアンサー

（XmlSelectBox1.jsの中身）
-その(2)-------------------------------------
//SELECTBOXをどんどん作成
　function select_change(selectbox,xml,outarea){
　 return function(){
　　 var items=[];

　　 items=getitem("/descendant-or-self::node()/child::" + selectbox.name
　　　　　　　　　 + "[contains(self::node()/text(),'"
　　　　　　　　　 + selectbox.value + "')]/child::*",xml);
　　 if(items.length>0){
　　　if(selectbox.parentNode.nextSibling){
　　　 if(selectbox.parentNode.nextSibling.lastChild.getAttribute("name")==items[0].nodeName)
　　　　outarea.removeChild(selectbox.parentNode.nextSibling);
　　　 }
　　　var next_contener=document.createElement("div");
　　　var next_selectbox=document.createElement("select");
　　　next_selectbox.setAttribute("name",items[0].nodeName);
　　　next_selectbox.add(new Option(items[0].nodeName+"を選択してください","default"),null);
　　　for(var i=0;i<items.length;i++){
　　　 next_selectbox.add(new Option(items[i].firstChild.nodeValue,items[i].firstChild.nodeValue),null);
　　　}

　//イベント追加
　　　next_selectbox.onchange=select_change(next_selectbox,xml,outarea);

　　　next_contener.appendChild(document.createTextNode(items[0].nodeName+":"));
　　　next_contener.appendChild(next_selectbox);
　　　if(selectbox.parentNode.nextSibling){
　　　 outarea.insertBefore(next_contener,selectbox.parentNode.nextSibling);
　　　}else{
　　　 outarea.appendChild(next_contener);
　　　}
　　　next_selectbox.selectedIndex=0;
　　 }else{
　　　if(typeof callback_func != "undefined")
　　　 callback_func(selectbox.getAttribute("name"),selectbox.value);
　　 }
　}
}

//XPATHで検索
　function getitem(xpath,xml){
　 var nodeValues=[];
　 var NodeList,Nodelength;
　 try{
　　 NodeList = xml.evaluate(xpath,xml,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,null);
　 }catch(e){
　　 NodeList = xml.selectNodes(xpath);
　 }
　 Nodelength=NodeList.snapshotLength||NodeList.length;
　 for(var i=0;i<Nodelength;i++){
　　 nodeValues[i]=(typeof(NodeList.snapshotItem)==='undefined')?NodeList.item(i):NodeList.snapshotItem(i);
　 }
　 return nodeValues;
　}
}

お礼

yyr446様

丁寧にサンプルを添えて頂きましてありがとうございました。
ほんと、様々な方法があるのですね。
参考にさせて頂きますので、ありがとうございました。

回答No.3

yyr446

続き
XmlSelectBox1.jsの中身です。
※全角空白は半角空白にしてね。

※（XmlSelectBox1.js使い方）
　new xmlselectbox(selector,xmlpath,key,callback)
　　selector:セレクトボックスを書き出す領域のCSSセレクター指定
　　xmlpath：読み込むXMLのファイル名(パス名)
　　key：最初のセレクトボックスの項目名
　callback(省略可)：コールバック関数
　　　　　引数(最後のSELECTBOXのname,最後のSELECTBOXのvalue)

（XmlSelectBox1.jsの中身）
-その(1)-------------------------------------
function xmlselectbox(id,xml_url,key,func){
　 var callback_func=func;
　 var outarea=document.querySelector(id);
　 var xml={};
　 var items=[];
　 var XHR= new XMLHttpRequest();
　 while(outarea.hasChildNodes()){
　　 outarea.removeChild(outarea.lastChild);
　 }

//XMLのロード（エラー処理省略）
　 XHR.open("GET",xml_url,false);
　 XHR.send(null);
　 if(XHR.status == 200) xml=XHR.responseXML;
　 //if(xml.hasOwnProperty("SelectionLanguage")) //IEは使えない
　 if(typeof xml.hasOwnProperty === "undefined") //とりあえず
　　 xml.setProperty("SelectionLanguage","XPath"); //IEにのみ必用

//最初のSELECTBOX生成

　 items=getitem("/descendant::node()/child::"+key,xml);

　 var first_contener=document.createElement("div");
　 var first_selectbox=document.createElement("select");
　 first_selectbox.setAttribute("name",key);
　 first_selectbox.add(new Option(key+"を選択してください","default"),null);
　 for(var i=0;i<items.length;i++){
　　 first_selectbox.add(new Option(items[i].firstChild.nodeValue,items[i].firstChild.nodeValue),null);
　 }

　//イベント追加
　 first_selectbox.onchange=select_change(first_selectbox,xml,outarea);

　 first_contener.appendChild(document.createTextNode(key+":"));
　 first_contener.appendChild(first_selectbox);
　 outarea.appendChild(first_contener);
　 first_selectbox.selectedIndex=0;
-----------------------続く

回答No.2

yyr446

続き
HTMLはこんなふうです。
※レイアウトはCSSで自分のページに合うようにしてね。
※全角空白は半角空白にしてね
（HTML）
-------------------------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Xml Select Box</title>
<style type="text/css">
body {color:#000000;background-color:#E0FFFF;}
#sel1 div{float:left;padding:10px;;background-color:#CCFF33;}
</style>
<script src="XmlSelectBox1.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<p><h2>Xml Select Box の利用例</h2>
<div style="padding:10px;">
<button onclick="go();">セレクトボックスを生成</button>
</div>
<div id="sel1"></div>
<div id="imagearea" style="clear:both;text-align:center;"></div>
</p>
<script type="text/javascript">
function go(){
　var myselectbox=xmlselectbox('#sel1','/kamigata.xml','性別',
　 function(selectname,value){
　　 var imgarea=document.querySelector("#imagearea");
　　 while(imgarea.hasChildNodes()){
　　　imgarea.removeChild(imgarea.lastChild);
　　 }
　　 var image=document.createElement("img");
　　 image.setAttribute("src",value);
　　 image.setAttribute("alt",value);
　　 imgarea.appendChild(image);
　 }
　);
}
</script>
</body>
</html>

お次は、XmlSelectBox1.jsの中身です。　．．．．続く

回答No.1

yyr446

画像を選択する絞込みの条件を、事前に階層的に決められるのであれば、その構造を
XMLファイルとしておき、それを読み込んで、JavascriptでHTMLのセレクトボックスを
順次作成して選ばせるというサンプルがあります。

　この方法だと検索エンジンも、PHPやデータベースもいっさい不用です。

例えば、こんなXMLを準備します。

（kamigata.xml）
------------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<髪型サンプル>
　<性別>男
　 <職業>学生
　　 <商品>かりあげ
　　　<画像>xx1.gif</画像>
　　 </商品>
　　 <商品>５分がり
　　　<画像>xx2.gif</画像>
　　 </商品>
　　 <商品>２分がり
　　　<画像>xx3.gif</画像>
　　 </商品>
　　 <商品>５厘がり
　　　<画像>xx4.gif</画像>
　　 </商品>
　 </職業>
　 <職業>社会人
　　 <商品>ちょんまげ
　　　<画像>xx5.gif</画像>
　　 </商品>
　　 <商品>パンチパーマ
　　　<画像>xx6.gif</画像>
　　 </商品>
　　 <商品>まるぼうず
　　　<画像>xx7.gif</画像>
　　 </商品>
　 </職業>
　</性別>
　<性別>女
　 <職業>学生
　　 <商品>おかっぱ
　　　<画像>xx8.gif</画像>
　　 </商品>
　　 <商品>三つ編み
　　　<画像>xx9.gif</画像>
　　 </商品>
　　 <商品>かりあげ
　　　<画像>xx10.gif</画像>
　　 </商品>
　 </職業>
　 <職業>ＯＬ
　　 <商品>くるくるパーマ
　　　<画像>xx11.gif</画像>
　　 </商品>
　　 <商品>ストレートパーマ
　　　<画像>xx12.gif</画像>
　　 </商品>
　　 <商品>ソバージュ
　　　<画像>xx13.gif</画像>
　　 </商品>
　 </職業>
　 <職業>主婦
　　 <商品>日本髪
　　　<画像>xx14.gif</画像>
　　 </商品>
　　 <商品>たまねぎヘア
　　　<画像>xx15.gif</画像>
　　 </商品>
　 </職業>
　</性別>
</髪型サンプル>

HTMLは．．．続く