【大喜利】【投稿～12/6】 西暦2100年、小学生のなりたい職業ランキング

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

解決済

  • 質問者：yajizou
  • 質問日時：
  • 回答数：4件

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

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

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

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;
　}
}
    • good
    • 0
    • 件
通報する
この回答へのお礼

yyr446様

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

通報する
お礼日時：2010/06/30 15:15

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;
-----------------------続く
    • good
    • 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の中身です。　．．．．続く
    • good
    • 0
    • 件
通報する

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は．．．続く
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報