サイト内の物件を検索条件で絞り込む方法
- JavaScriptを使用して、サイト内の物件を複数の検索条件で絞り込む方法を紹介します。
- 具体的には、ドロップダウン形式の検索条件を使用して、物件種別や地域、価格などの条件で絞り込むことができます。
- 選択した条件に該当する物件が絞り込まれ、ユーザーが指定した条件に合致する物件のみ表示されます。
- ベストアンサー
サイト内の物件を複数の検索条件で絞り込む方法
javascriptのみで実現したいです。 よく情報の多いサイトで ドロップダウン形式の検索条件を指定して 物件を絞り込む機能を見たことがあります。 例えば物件が200ほどある不動産のサイトを作る場合 （200物件を1ページ内に全て表示させます） <html> <head> <style type="text/css"> h1{ color:#f00; } .contents{ width:400px; padding:10px; border: 2px solid #f00; margin-bottom:50px; } .shashinn{ width:300px; height:200px; background-color:black; } </style> </head> <body> <h1>物件情報</h1> <div class="contents"> <h2>物件１</h2> 場所：神奈川県横浜市<br> 物件種別：売地<br> 価格：1200万円<br> 敷地面積：150.00m2<br> <br> <div class="shashinn">写真</div> <br> お勧め物件です。 </div> <div class="contents"> <h2>物件１</h2> 場所：神奈川県横浜市<br> 物件種別：売地<br> 価格：1200万円<br> 敷地面積：150.00m2<br> <br> <div class="shashinn">写真</div> <br> お勧め物件です。 </div> <div class="contents"> <h2>物件１</h2> 場所：神奈川県横浜市<br> 物件種別：売地<br> 価格：1200万円<br> 敷地面積：150.00m2<br> <br> <div class="shashinn">写真</div> <br> お勧め物件です。 </div> </body> </html> 上記のhtmlにjavascriptだけで 以下のような検索条件で絞り込むことは可能でしょうか。 物件種別（売地、新築住宅、中古住宅、マンション） 市町村（横浜市、鶴見区、神奈川区、西区、・・・） 値段（500万未満、500万以上1000万未満、1000万以上1500万未満、・・・） ドロップダウンで検索条件が選択でき、 OKボタンを押すとそれに該当する物件が絞られる。 例えば、 物件種別ではマンション 市町村は選ばずに 値段は500万以上1000万未満 を検索条件で選択した場合、 その２つの条件に該当したものにまとめられる。 といったようにしたいです。
- tekkenman7
- お礼率70% (150/212)
- JavaScript
- 回答数10
- ありがとう数7
- みんなの回答 （10）
- 専門家の回答
質問者が選んだベストアンサー
しつもんしゃさんがじぶんでかいておいた、div#kensaku ようそをかってにけすからうごかないのさ。 もじすうせいげんがあるから、みじかくかいたために、りかいしにくいですね。では！ <!DOCTYPE html> <html lang="ja"> <head> <title>Test</title> <meta charset="utf-8"> <style> #BUKKEN, #BUKKEN ol { list-style :none; margin: 1em 0; padding : 0; } #BUKKEN li > ol > li:nth-of-type(1) { border-bottom : 2px blue solid; font-size: x-large; width:200px; color:#080; margin-bottom: 1ex; } #BUKKEN li > ol > li:nth-of-type(4) { color : red; } #BUKKEN li > ol > li:nth-of-type(6) > img { border : 1px green solid; width: 200px; height:80px; } #kensaku { border : 1px green solid; width: 600px; } </style> </head> <body> <div id="kensaku"> <form action="#"> <ol> <li> 物件種別: <select name="sel_type"> <option value=""> <option value="売地">売地 <option value="新築住宅">新築住宅 <option value="中古住宅">中古住宅 <option value="マンション">マンション </select> <li> 市町村: <select name="sel_adr"> <option value=""> <option value="横浜市">横浜市 <option value="鶴見区">鶴見区 <option value="神奈川区">神奈川区 <option value="西区">西区 </select> <li> 価格: <select name="sel_kakaku"> <option value=""> <option value="0,500">500万未満 <option value="500,1000">500万以上1000万未満 <option value="1000,1500">1000万以上1500万未満 </select> </ol> <p> <input type="reset" onclick="allDisp()"> <img src="sample.jpg" onclick="find2()" alt="検索ボタン"> </p> </form> </div> <ul id="BUKKEN"> <li> <ol> <li>物件1 <li>場所：神奈川県横浜市 <li>物件種別：売地 <li>価格：400万円 <li>敷地面積：150.00m2 <li><img src="abc.jpg" alt="写真"> <li>お勧め物件です。 </ol> </li> <li> <ol> <li>物件48 <li>場所：神奈川県西区 <li>物件種別：マンション <li>価格：1400万円 <li>敷地面積：150.00m2 <li><img src="abc.jpg" alt="写真"> <li>なにより見えない人には、格安物件です </ol> </li> </ul> <script> function find (_, n) { var e = this; var d = this.ownerDocument; var v = e.value; var r, l; if (v && n) { l = d.querySelectorAll ('#BUKKEN > li > ol > li:nth-of-type(' + n + ')'); switch (n) { case 2 : case 3 : r = Array.prototype.filter.call (l, function (e) { return this.test (e.textContent) }, new RegExp (v)); break; case 4: //case4は価格 var t = v.split (','); //varの追加 r = Array.prototype.filter.call (l, function (e) { var n, m; if (n = e.textContent.match (/(\d+)/)) { m = +n[1]; if (this.min <= m && m < this.max) { return true; } } }, {min: +t[0], max: +t[1]}); break; } if (r) Array.prototype.forEach.call (d.querySelectorAll ('#BUKKEN > li'), function (e) { if (-1 == this.indexOf (e)) e.style.display = 'none'; }, r.map (function (e) { return e.parentNode.parentNode; })); } } function find2 () { allDisp (); [3,2,4].forEach ( function (n, i) { find.call (this[i], null, n); }, document.querySelectorAll ('#kensaku select[name^="sel_"]') ); } function allDisp () { Array.prototype.forEach.call ( document.querySelectorAll ('#BUKKEN > li'), function (e) { e.style.display = 'list-item'; } ); } </script>
その他の回答 (9)
- babu_baboo
- ベストアンサー率51% (268/525)
なんでもかんでもスクリプトでおこなうのは、たやすいことですが、ぐげんします。 ぶっけんりすとのさいご（けんさくにさゆうされない）に、 「お探しの物件は見つかりませんでしたか？物件が表示されない場合は、条件を換えてもう一度検索してみてください。」のように、どちらともとれるひょうげんにするとか・・・ さいしょのせっけいとはちがい、つけやきばのついかしょりのれんぞくなので、あとだしでいわれると・・・ もうすでに、「なんだこれ？」れべるのコードになっています。 それと、innerHTML でかきかえてはいけません。なぜならぶっけんりすとがすべてきえてしまいます たのかたのいけんもとりいれて、あらためてしつもんなさってはどうでしょう？ もうだれものぞきつづけていないでしょうし。
お礼
いろいろとありがとうございました。 とても助かりました。 教えて頂いたコードを使わせて頂きます。 より良いものになるよう他の方の意見も参考にしたいと思います。
- babu_baboo
- ベストアンサー率51% (268/525)
できれば、ていせいを。 「わけありですが、鈍感であれば見えません。」ではなく、 「なにより見えない人には、格安物件です」にするべきだったと。
- babu_baboo
- ベストアンサー率51% (268/525)
う～ん、なんだかな～。（ださくになるよ？） まず、select ようその、onchange のたぐいのものをさくじょして、 img ようそに、onclick="find2()" でも、はりつけて、 e.disabled = true; をさくじょする function find2 () { allDisp (); [3,2,4].forEach ( function (n, i) { find.call (this[i], null, n); }, document.querySelectorAll ('#kensaku select[name^="sel_"]') ); } function allDisp () { Array.prototype.forEach.call ( document.querySelectorAll ('#BUKKEN > li'), function (e) { e.style.display = 'list-item'; } ); } いまみなおすと、おすすめできるこーどでは、なさそうなのだけど・・・
お礼
ありがとうございます。 教えてもらったようにやってみましたが 動作しませんでした。 一番下にその修正をのせてあります。 自分なりにあれこれいじり、 function find (_, n) { var e = t ～～～ .parentNode; })); } } を消してみて imgの部分を押すとブラウザの検索窓が開き、 キャンセルを３回押さないと閉じない状態になってしまったので、 今度は、削除したselectのonchangeを戻すと、 各選択の部分を押すと直ちに検索が開始され、 imgを押すと選択部分のテキストはそのままに 全ての物件が表示されたりしました。 いろいろ試しましたが実現しませんでした。 お手数をおかけしますが、 また教えて頂けないでしょうか。 <!DOCTYPE html> <html lang="ja"> <head> <title>Test</title> <meta charset="utf-8"> <style> #BUKKEN, #BUKKEN ol { list-style :none; margin: 1em 0; padding : 0; } #BUKKEN li > ol > li:nth-of-type(1) { border-bottom : 2px blue solid; font-size: x-large; width:200px; color:#080; margin-bottom: 1ex; } #BUKKEN li > ol > li:nth-of-type(4) { color : red; } #BUKKEN li > ol > li:nth-of-type(6) > img { border : 1px green solid; width: 200px; height:80px; } </style> </head> <body> <h1>あんぱんまんけんた君 検索するＺ～！</h1> <form action="#"> <ol> <li> 物件種別: <select name="sel_type"> <option value=""> <option value="売地">売地 <option value="新築住宅">新築住宅 <option value="中古住宅">中古住宅 <option value="マンション">マンション </select> <li> 市町村: <select name="sel_adr"> <option value=""> <option value="横浜市">横浜市 <option value="鶴見区">鶴見区 <option value="神奈川区">神奈川区 <option value="西区">西区 </select> <li> 価格: <select name="sel_kakaku"> <option value=""> <option value="0,500">500万未満 <option value="500,1000">500万以上1000万未満 <option value="1000,1500">1000万以上1500万未満 </select> </ol> </form> <img src="" alt="検索" onclick="find2()" /> <ul id="BUKKEN"> <li> <ol> <li>物件1 <li>場所：神奈川県横浜市 <li>物件種別：売地 <li>価格：400万円 <li>敷地面積：150.00m2 <li><img src="abc.jpg" alt="写真"> <li>お勧め物件です。 </ol> </li> <li> <ol> <li>物件48 <li>場所：神奈川県西区 <li>物件種別：マンション <li>価格：1400万円 <li>敷地面積：150.00m2 <li><img src="abc.jpg" alt="写真"> <li>なにより見えない人には、格安物件です </ol> </li> </ul> <script> function find (_, n) { var e = this; var d = this.ownerDocument; var v = e.value; var r, l; if (v && n) { l = d.querySelectorAll ('#BUKKEN > li > ol > li:nth-of-type(' + n + ')'); switch (n) { case 2 : case 3 : r = Array.prototype.filter.call (l, function (e) { return this.test (e.textContent) }, new RegExp (v)); break; case 4: t = v.split (','); r = Array.prototype.filter.call (l, function (e) { var n, m; if (n = e.textContent.match (/(\d+)/)) { m = +n[1]; if (this.min <= m && m < this.max) { return true; } } }, {min: +t[0], max: +t[1]}); break; } if (r) Array.prototype.forEach.call (d.querySelectorAll ('#BUKKEN > li'), function (e) { if (-1 == this.indexOf (e)) e.style.display = 'none'; }, r.map (function (e) { return e.parentNode.parentNode; })); } } function find2 () { allDisp (); [3,2,4].forEach ( function (n, i) { find.call (this[i], null, n); }, document.querySelectorAll ('#kensaku select[name^="sel_"]') ); } function allDisp () { Array.prototype.forEach.call ( document.querySelectorAll ('#BUKKEN > li'), function (e) { e.style.display = 'list-item'; } ); } </script> </body> </html>
- babu_baboo
- ベストアンサー率51% (268/525)
ごめんなさい。ていせいです。 へんすう t が、グローバルでした。 var でもつけてください。
- babu_baboo
- ベストアンサー率51% (268/525)
あたらしめのぶらうざで。ぜんかくくうはくははんかくに。 <!DOCTYPE html> <html lang="ja"> <head> <title>Test</title> <meta charset="utf-8"> <style> #BUKKEN, #BUKKEN ol { list-style :none; margin: 1em 0; padding : 0; } #BUKKEN li > ol > li:nth-of-type(1) { border-bottom : 2px blue solid; font-size: x-large; width:200px; color:#080; margin-bottom: 1ex; } #BUKKEN li > ol > li:nth-of-type(4) { color : red; } #BUKKEN li > ol > li:nth-of-type(6) > img { border : 1px green solid; width: 200px; height:80px; } </style> </head> <body> <h1>あんぱんまんけんた君 検索するＺ～！</h1> <form action="#"> <ol> <li> 物件種別: <select name="sel_type" onchange="find.call(this, event, 3)"> <option value=""> <option value="売地">売地 <option value="新築住宅">新築住宅 <option value="中古住宅">中古住宅 <option value="マンション">マンション </select> <li> 市町村: <select name="sel_adr" onchange="find.call(this, event, 2)"> <option value=""> <option value="横浜市">横浜市 <option value="鶴見区">鶴見区 <option value="神奈川区">神奈川区 <option value="西区">西区 </select> <li> 価格: <select name="sel_kakaku" onchange="find.call(this, event, 4)"> <option value=""> <option value="0,500">500万未満 <option value="500,1000">500万以上1000万未満 <option value="1000,1500">1000万以上1500万未満 </select> </ol> <p> <input type="reset" onclick="allDisp()"> </p> </form> <ul id="BUKKEN"> <li> <ol> <li>物件1 <li>場所：神奈川県横浜市 <li>物件種別：売地 <li>価格：400万円 <li>敷地面積：150.00m2 <li><img src="abc.jpg" alt="写真"> <li>お勧め物件です。 </ol> </li> <li> <ol> <li>物件48 <li>場所：神奈川県西区 <li>物件種別：マンション <li>価格：1400万円 <li>敷地面積：150.00m2 <li><img src="abc.jpg" alt="写真"> <li>わけありですが、鈍感であれば見えません。 </ol> </li> </ul> <script> function find (_, n) { var e = this; var d = this.ownerDocument; var v = e.value; var r, l; if (v && n) { l = d.querySelectorAll ('#BUKKEN > li > ol > li:nth-of-type(' + n + ')'); e.disabled = true; switch (n) { case 2 : case 3 : r = Array.prototype.filter.call (l, function (e) { return this.test (e.textContent) }, new RegExp (v)); break; case 4: t = v.split (','); r = Array.prototype.filter.call (l, function (e) { var n, m; if (n = e.textContent.match (/(\d+)/)) { m = +n[1]; if (this.min <= m && m < this.max) { return true; } } }, {min: +t[0], max: +t[1]}); break; } if (r) Array.prototype.forEach.call (d.querySelectorAll ('#BUKKEN > li'), function (e) { if (-1 == this.indexOf (e)) e.style.display = 'none'; }, r.map (function (e) { return e.parentNode.parentNode; })); } } function allDisp () { Array.prototype.forEach.call (document.querySelectorAll ('#BUKKEN > li'), function (e) { e.style.display = 'list-item'; }); Array.prototype.forEach.call (document.querySelectorAll ('form select'), function (e) { e.disabled = false }); } </script>
お礼
具体的なサンプルを作成していただき、ありがとうございます。 さっそく組み込んでみました。 ちゃんと動作しました。 現在では、1度選択すると選択できないようになっていますが、 それを何度でも変更できるようにして、 検索ボタンの画像を押すと検索が開始され、 検索後も再度選択を変更し検索できるように 変更しようとチャレンジしましたが、できませんでした。 どこをどのように変更すればよいのでしょうか。 <html> <head> <title></title> <style> #BUKKEN, #BUKKEN ol { list-style :none; margin: 1em 0; padding : 0; } #BUKKEN li > ol > li:nth-of-type(1) { border-bottom : 2px blue solid; font-size: x-large; width:200px; color:#080; margin-bottom: 1ex; } #BUKKEN li > ol > li:nth-of-type(4) { color : red; } #BUKKEN li > ol > li:nth-of-type(6) > img { border : 1px green solid; width: 200px; height:80px; } #kensaku { border : 1px green solid; width: 600px; } </style> <script> function find (_, n) { var e = this; var d = this.ownerDocument; var v = e.value; var r, l; if (v && n) { l = d.querySelectorAll ('#BUKKEN > li > ol > li:nth-of-type(' + n + ')'); /* e.disabled = true; 何度でも選択できるようにするため */ switch (n) { case 2 : case 3 : //case2が場所、case3が物件種別 r = Array.prototype.filter.call (l, function (e) { //Array.filterは配列の楽な書き方。.callは第１引数を this として、Function を呼び出す。第２引数以降は、 Function への第１引数、第２引数、... となる。 return this.test (e.textContent) }, new RegExp (v)); //returnでeに戻る。new RegExpは正規表現オブジェクトといい、文字列のパターンマッチングを行う際に用いられます。 break; case 4: //case4は価格 var t = v.split (','); //varの追加 r = Array.prototype.filter.call (l, function (e) { var n, m; if (n = e.textContent.match (/(\d+)/)) { m = +n[1]; if (this.min <= m && m < this.max) { return true; } } }, {min: +t[0], max: +t[1]}); break; } if (r) Array.prototype.forEach.call (d.querySelectorAll ('#BUKKEN > li'), function (e) { if (-1 == this.indexOf (e)) e.style.display = 'none'; }, r.map (function (e) { return e.parentNode.parentNode; })); } } function allDisp () { Array.prototype.forEach.call (document.querySelectorAll ('#BUKKEN > li'), function (e) { e.style.display = 'list-item'; }); Array.prototype.forEach.call (document.querySelectorAll ('form select'), function (e) { e.disabled = false }); } </script> </head> <body> <div id="kensaku"> <form action="#"> <ol> <li> 物件種別: <select name="sel_type" onchange="find.call(this, event, 3)"> <option value=""> <option value="売地">売地 <option value="新築住宅">新築住宅 <option value="中古住宅">中古住宅 <option value="マンション">マンション </select> <li> 市町村: <select name="sel_adr" onchange="find.call(this, event, 2)"> <option value=""> <option value="横浜市">横浜市 <option value="鶴見区">鶴見区 <option value="神奈川区">神奈川区 <option value="西区">西区 </select> <li> 価格: <select name="sel_kakaku" onchange="find.call(this, event, 4)"> <option value=""> <option value="0,500">500万未満 <option value="500,1000">500万以上1000万未満 <option value="1000,1500">1000万以上1500万未満 </select> </ol> <p> <input type="reset" onclick="allDisp()"> </p> </form> <img src="sample.jpg" onclick="find(_, n)" alt="検索ボタン" /> </div> <ul id="BUKKEN"> <li> <ol> <li>物件1 <li>場所：神奈川県横浜市 <li>物件種別：売地 <li>価格：400万円 <li>敷地面積：150.00m2 <li><img src="abc.jpg" alt="写真"> <li>お勧め物件です。 </ol> </li> <li> <ol> <li>物件48 <li>場所：神奈川県西区 <li>物件種別：マンション <li>価格：1400万円 <li>敷地面積：150.00m2 <li><img src="abc.jpg" alt="写真"> <li>わけありですが、鈍感であれば見えません。 </ol> </li> </ul> </body> </html>
- kokorone
- ベストアンサー率38% (417/1093)
サンプルは４８パターンを定義しています。 最初は、すべての要素をHTML内からJavaScriptで読み込もうと思いましたが、すべての要素を 配列内に定義してみました。 配列内の要素を、順番に従って、divブロックに定義します。 ４００件ということは、それだけで、コーディングが大変ですよ。
- kokorone
- ベストアンサー率38% (417/1093)
<html> <head> <script type="text/javascript"> <!-- type_tbl = new Array( "売地", "売地", "売地", "売地", "売地", "売地", "売地", "売地", "売地", "売地", "売地", "売地" ,"新築住宅", "新築住宅", "新築住宅", "新築住宅", "新築住宅", "新築住宅", "新築住宅", "新築住宅", "新築住宅", "新築住宅", "新築住宅", "新築住宅" ,"中古住宅", "中古住宅", "中古住宅", "中古住宅", "中古住宅", "中古住宅", "中古住宅", "中古住宅", "中古住宅", "中古住宅", "中古住宅", "中古住宅" ,"マンション", "マンション", "マンション", "マンション", "マンション", "マンション", "マンション", "マンション", "マンション", "マンション", "マンション", "マンション" ); adr_tbl = new Array( "神奈川県横浜市", "神奈川県横浜市", "神奈川県横浜市", "神奈川県鶴見区", "神奈川県鶴見区", "神奈川県鶴見区", "神奈川県神奈川区", "神奈川県神奈川区", "神奈川県神奈川区", "神奈川県西区", "神奈川県西区", "神奈川県西区" ,"神奈川県横浜市", "神奈川県横浜市", "神奈川県横浜市", "神奈川県鶴見区", "神奈川県鶴見区", "神奈川県鶴見区", "神奈川県神奈川区", "神奈川県神奈川区", "神奈川県神奈川区", "神奈川県西区", "神奈川県西区", "神奈川県西区" ,"神奈川県横浜市", "神奈川県横浜市", "神奈川県横浜市", "神奈川県鶴見区", "神奈川県鶴見区", "神奈川県鶴見区", "神奈川県神奈川区", "神奈川県神奈川区", "神奈川県神奈川区", "神奈川県西区", "神奈川県西区", "神奈川県西区" ,"神奈川県横浜市", "神奈川県横浜市", "神奈川県横浜市", "神奈川県鶴見区", "神奈川県鶴見区", "神奈川県鶴見区", "神奈川県神奈川区", "神奈川県神奈川区", "神奈川県神奈川区", "神奈川県西区", "神奈川県西区", "神奈川県西区" ); kakaku_tbl = new Array( "400", "900", "1400", "400", "900", "1400", "400", "900", "1400", "400", "900", "1400" ,"400", "900", "1400", "400", "900", "1400", "400", "900", "1400", "400", "900", "1400" ,"400", "900", "1400", "400", "900", "1400", "400", "900", "1400", "400", "900", "1400" ,"400", "900", "1400", "400", "900", "1400", "400", "900", "1400", "400", "900", "1400" ); function dsp_select() { div_tbl = new Array(48); var idx; var dvname0; var dvname; var ok_flg; var divinf; var sel_type_idx = document.F1.sel_type.selectedIndex; var sel_adr_idx = document.F1.sel_adr.selectedIndex; var sel_kakaku_idx= document.F1.sel_kakaku.selectedIndex; var sel_type = document.F1.sel_type.options[sel_type_idx].value; var sel_adr = document.F1.sel_adr.options[sel_adr_idx].value; var sel_kakaku= document.F1.sel_kakaku.options[sel_kakaku_idx].value; for(idx = 0; idx < 48; idx ++){ if(idx < 10) { dvname0 = "00" + idx; } else if(idx < 100) { dvname0 = "0" + idx; } else { dvname0 = "" + idx; } dvname = "div" + dvname0; div_tbl[idx] = dvname; } for(idx = 0; idx < 48; idx ++){ ok_flg = 0; /* 物件種類チェック */ if((sel_type == "") || (sel_type == type_tbl[idx])) { /* 場所チェック */ if((sel_adr == "") || (adr_tbl[idx].indexOf(sel_adr,0) >= 0)) { /* 価格チェック */ if((sel_kakaku == "") || (((sel_kakaku - 500) <= kakaku_tbl[idx] ) && (sel_kakaku > kakaku_tbl[idx] ) )) { ok_flg = 1; } } } divinf = document.getElementById(div_tbl[idx]); if(ok_flg == 1) { divinf.style.display = "block"; } else { divinf.style.display = "none"; } } } // --> </script> </head> <body> <form name="F1" > <div > <table> <tr> <th>物件種別</th> <td> <select name="sel_type"> <option value=""> <option value="売地">売地 <option value="新築住宅">新築住宅 <option value="中古住宅">中古住宅 <option value="マンション">中古住宅 </select> </td> </tr> <tr> <th>市町村</th> <td> <select name="sel_adr"> <option value=""> <option value="横浜市">横浜市 <option value="鶴見区">鶴見区 <option value="神奈川区">神奈川区 <option value="西区">西区 </select> </td> </tr> <tr> <th>価格</th> <td> <select name="sel_kakaku"> <option value=""> <option value="500">500万未満 <option value="1000">500万以上1000万未満 <option value="1500">1000万以上1500万未満 </select> </td> </tr> <tr> <th></th> <td colspan="2"> <input type="button" id="btnok" value="検索" onclick="dsp_select()"> </td> </tr> </table> </div> <div id="div000" style="display:none"> <h2>物件1</h2> 場所：神奈川県横浜市<br> 物件種別：売地<br> 価格：400万円<br> 敷地面積：150.00m2<br> <br> <div class="shashinn">写真</div> <br> お勧め物件です。 </div> <div id="div047" style="display:none"> <h2>物件48</h2> 場所：神奈川県西区<br> 物件種別：マンション<br> 価格：1400万円<br> 敷地面積：150.00m2<br> <br> <div class="shashinn">写真</div> <br> お勧め物件です。 </div> </form> </body> </html> 文字数制限があるためdivブロックは最初と最後のみ記載しました。
お礼
具体的に作成していただき、ありがとうございます。 さっそく試してみたところ、動作しましたが、 気になる点がいくつかありました。 初めに白紙の状態で検索すると物件が現れますが、 できれば、物件情報は初めに全て見せたいです。 物件の情報変更や増減が激しく頻繁に更新する予定ですが、 修正箇所を少なくしたいです。
- kokorone
- ベストアンサー率38% (417/1093)
すみません。自宅の環境では、JavaScriptがうまく動作しません。 もしよければ、明日の夜までお待ちください。 会社のPCでサンプルを作成します。 しかし、なぜJavaScriptにこだわるのか、教えてください。 表示件数200件ということは、元データは何件でしょうか？ JavaScriptだけで実現するということは、 元データすべてをHTML内に記述しなければなりません。 ファイル容量が激増するとともに、ソースファイルを参照する ことで、すべてのデータがユーザに可視化されてしまいますよ。 業務につかうにせよ。個人がつかうにせよ。見た目にも凝りたいの であれば、サーバープログラムとの併用を考えてください。
お礼
ありがとうございます。 >JavaScriptにこだわるのか、教えてください。 JavaScriptとHTMLしか部分的に分かりません。 サーバーサイドのプログラムは分かりません。 興味もあり勉強して覚えたいですが、 今は時間がないのででJavaScriptのみで実現したいと考えました。 >表示件数200件ということは、元データは何件でしょうか？ 多くても全部で400件以内になると思います。 >ファイル容量が激増するとともに、ソースファイルを参照する >ことで、すべてのデータがユーザに可視化されてしまいますよ。 プログラムを全て見られることでセキュリティの弱点になるということでしょうか。 個人情報はまったくのせないので大丈夫だと思います。 >見た目にも凝りたいのであれば、 >サーバープログラムとの併用を考えてください。 400物件もあると動作が重くなってしまうのでしょうか。 >会社のPCでサンプルを作成します。 ありがとうございます。 よろしくお願いいたします。
- kokorone
- ベストアンサー率38% (417/1093)
質問者さまのスキルレベルにもよりますが、JavaScriptだけで可能かと言われれば、 可能です。 すべての候補の表示を非表示にします。 すべての候補のすべての要素に名前を付けます、 選択条件を元に、ｉｆ文でチェックして、該当物件だけ非表示を表示にします。 但し、一般的にはサーバープログラム ＶＢ等 と データベースを使用します。 検索条件により、データベースを検索し、抽出したデータを表示しています。
お礼
早急なアドバイス有難うございます。 すべての候補の表示を非表示にします。 すべての候補のすべての要素に名前を付けます、 選択条件を元に、ｉｆ文でチェックして、該当物件だけ非表示を表示にします。 イメージがわかないのですが、 そういったサンプルのようなものはありますでしょうか。 できればjavascriptだけでなんとかしたいです。
関連するQ&A
- レイアウトが崩れます
汚いソースで失礼します。 メニューとコンテンツとサブメニューがありますが この３つの高さを保つにはどうしたらいんでしょうか？ コンテンツ部分の高さが長いと メニューとサブメニューの高さは短いままで ダサい感じなんです。 なんとご説明したらいいのやら（汗 コンテンツ部分が長くてもメニューとサブメニューの高さを自動に設定させるようにするには、どうしたら良いのでしょうか？ ご教授願います HTMLのソース＋CSSです↓ <html> <body> <div class="wrapper"> <div class="header"> ヘッダーになります<br> </div> <div class="main"> <div class="menu"> menu<br> menu<br> menu<br> menu<br> menu<br> menu<br> </div> <div class="contents"> コンテンツになります<br> コンテンツになります<br> コンテンツになります<br> コンテンツになります<br> </div> <div class="submenu"> サブメニューはこちらです<br> サブメニューはこちらです<br> </div> </div> <div class="footer"> フッター<br> </div> </div> </body> </html> CSS .wrapper { width: 900px; margin: 0 auto; line-height: 1.5; } /* メイン*/ .main { width: 900px; } /* ヘッダ*/ .header { width: 900px; height: 200px; background-color: #66FFFF; background:url(img/top2.jpg) ; } /* Menu*/ .menu { width: 150px; float: left; background-color: #FFFF99; } /*コンテンツの設定*/ .contents { float: left; width: 600px; background-color: white; } /*SubMenuの設定*/ .submenu { float: left; width: 150px; height: 300px background-color: #66FF66; } /* 下の設定 */ .footer { clear: both; width: 900px; border-top: 1px dotted gray; height: 20px; text-align: center; font-size:0.7em; background-color:black; }
- ベストアンサー
- HTML
- HTML&CSS DIVをぴったりと縦に並べたい
HTML&CSS初心者です。 下記のソース様に、DIVで一つにまとめたBOXを縦に並べたいのですが、 「見出し002」の上のマージンがうまく取れずに困っています。 .box内のphoto00.jpgをフロートにしている為、フロートが悪さをしている事を考え、 「見出し002」の上のDIV内に<br style="clear: both;" />を入れると、余白が生まれるのですが、 MacのSafariとFirefoxでは、余白の差が出てしまいます。（Safariの方が余白が大きい） <br style="clear: both;" />を入れないと、上のマージンはほぼ消えてしまい、わずかにFirefoxの方では余白が生まれます。 ちなみにこの現象は「ここにテキストが入ります。」の行数を減らすと解決するのですが、 下記のソースでも、photo00.jpgの高さをはみ出す行数ではない為、この<div class="box">に 変な膨らみを持たせたくありません。 どなたか解決法を教えて下さい。よろしくお願い致します。 【HTML】 <div id="main"> <div class="mds01"><h3><em>見出し001</em></h3></div> <div class="box"> <img src="img/photo00.jpg" width="155" height="108"> <h5>小見出し</h5> <p class="txt">ここにテキストが入ります。<br><br> ここにテキストが入ります。<br> ここにテキストが入ります。</p> </div> <div class="box"> <img src="img/photo00.jpg" width="155" height="108"> <h5>小見出し</h5> <p class="txt">ここにテキストが入ります。<br><br> ここにテキストが入ります。<br> ここにテキストが入ります。</p><br style="clear: both;" /> </div> <div class="mds02"><h3><em>見出し002</em></h3></div> <div class="box"> <img src="img/photo00.jpg" width="155" height="108"> <h5>小見出し</h5> <p class="txt">ここにテキストが入ります。<br><br> ここにテキストが入ります。<br> ここにテキストが入ります。</p> </div> </div> 【CSS】 /*メイン大枠部分*/ #main { margin: 0px; padding: 0px; width: 627px; float: right; background: #FFFFFF; height: auto; } /*各見出し*/ .mds01 h3 { background: url(img/mmds01.gif) no-repeat; margin: 25px 0px 15px; padding: 0px; height: 20px; width: 587px; font-size: 9px; color: #FFFFFF; clear: left; float: none; } .mds02 h3 { background: url(img/mmds02.gif) no-repeat; margin: 25px 0px 15px; padding: 0px; height: 20px; width: 587px; font-size: 9px; color: #FFFFFF; clear: left; float: none; } /*ボックス*/ .box { margin: 0px; padding: 0px; height: auto; width: 587px; clear: left; } /*ボックス内・画像とテキスト*/ #main .box img { float: left; padding-right: 10px; } #main .box h5 { font: bold 14px "ＭＳ Ｐゴシック", Osaka; color: #022962; margin: 0px 0px 10px; padding: 0px; } .txt { font: normal 13px/16px "ＭＳ Ｐゴシック", Osaka; color: #333333; margin: 0px; padding: 0px; } em { visibility: hidden; }
- ベストアンサー
- HTML
- スタイルシートでのレイアウトについて
スタイルシートでレイアウトしたく、フリーのテンプレートからソースをもってきました。 -HTML- <div id="outline"> <div class="main"> メイン上部コンテンツ部分 </div><!-- end main --> <div class="side"> サイド上部メニュー部分 </div><!-- end side --> <br class="c-both"> <div class="main"> メイン下部コンテンツ部分 </div><!-- end main --> <div class="side"> サイド下部メニュー部分 </div><!-- end side --> <br class="c-both"> <div class="footer"> フッター部分 </div><!-- end footer --> </div><!-- end outline --> -CSS- #outline{ width : 750px ; text-align : left ; border : solid 1px #000000 ; } .main { width : 200px ; background : #ebebeb ; margin-bottom : 10px ; float : left ; } .side { width : 540px ; background : #ebebeb ; margin-bottom : 10px ; float : right ; } .c-both { clear : both ; } .footer{ width : 100% ; background : #ebebeb ; } そこで、"上部コンテンツ部分"と"下部コンテンツ部分"の高さを、それぞれ違う高さにしたいのですが、どうしたら良いでしょうか？ あと、メイン上部コンテンツ部分・サイド上部メニュー部分、メイン下部コンテンツ部分・サイド下部メニュー部分の下に、同じように行を追加したいのですが、どうしたら良いでしょうか？ スタイルシートの段組みで、非常に困っています。 助けて下さいm(_ _)m
- 締切済み
- その他（プログラミング・開発）
- HPのCSSについて
超初心者です。へッダーの固定をしたページを作りたいのですが、フリーのCSSを使ってやってみたところ、背景の色、タイトルの文字の大きさ、現在センタリングになっているのを全体に表示したいのに、それが上手くいきません。以下、試してみたCSSなのですが、どこをどう変えれば、上記の変更が可能でしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSSでヘッダーを固定する 第４歩</title> <style type="text/css"> html { height:100%; } body { margin:0px; height:100%; } #body { width:700px; margin:0px auto; } #header { background:#ccffcc; height:100px; /* width:100%;*/ width:700px; position:fixed; } #main { padding-top:100px; background:#ffff99; } #footer { background:#ffcc99; height:80px; } </style> <!--[if IE 6]> <link rel="stylesheet" href="./fixheader_ie6.css" type="text/css" /> <![endif]--> </head> <body> <div id="body"> <div id="header"> ヘッダー </div> <div id="main"> コンテンツ1<br /> コンテンツ2<br /> コンテンツ3<br /> コンテンツ4<br /> コンテンツ5<br /> コンテンツ6<br /> コンテンツ7<br /> コンテンツ8<br /> コンテンツ9<br /> コンテンツ10<br /> コンテンツ11<br /> コンテンツ12<br /> コンテンツ13<br /> コンテンツ14<br /> コンテンツ15<br /> コンテンツ16<br /> コンテンツ17<br /> コンテンツ18<br /> コンテンツ19<br /> コンテンツ20<br /> コンテンツ21<br /> コンテンツ22<br /> コンテンツ23<br /> コンテンツ24<br /> コンテンツ25<br /> コンテンツ26<br /> コンテンツ27<br /> コンテンツ28<br /> コンテンツ29<br /> コンテンツ30<br /> コンテンツ31<br /> </div> <div id="footer"> フッター </div> </div> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
- スタイルシートを使用したサイト作りで
サイトページの真ん中に４５０ｐｘの白の柱に本文を入れ、周りをすべて黒というスタイルにしたく思ってます。 柱をウィンドウの上から下まで表示したいのですが、どうしてもうまくいきません。どうぞ御指南下さい！！作ったタグを載せます。 *{margin:0; padding:0; font:normal normal normal x-small/1.5em Verdana,"ＭＳ ゴシック",Osaka,Gothic,sans-serif;} body{ height:100%; background-color:#000000; color:#000000; cursor:default;} br{ letter-spacing:normal;} #body{margin:0px auto; width:450px; height:100%; background:#ffffff;} #header{padding:0px} #menu{padding:0px 0px 5px; text-align:center;} #main{padding:0px 10px;} #navi{text-align:right; padding:0px 10px;} #foot{height:123px; background:url(img/img2.gif) no-repeat 0% 0%;} .text{padding:0px 0px 10px;} p{padding:1px 0px;} h1,h2{font-weight:bold;} h1{text-align:center; color:#666666; font-size:190%; padding:10px 0px 0px;} h2{ text-align:left; color:#000000; font-size:100%; padding:0px 2px; margin:5px 0px;} サイトページ <body> <div id="body"> <div id="menu"> <h1 id="TOP">- ABOUT - </h1> </div> <hr class="none"> <hr class="none"> <div id="main"> <h2>test</h2> <div class="text"> <p>test</p> </div> <h2>test</h2> <div class="text"> <p> test </p> </div> </div> <div id="navi"> <p>INDEX // <a href="#TOP">PAGE TOP</a> // </p> </div> </div> </body> </html>
- ベストアンサー
- その他([技術者向] コンピューター)
- 条件付きで要素を取得したい
条件付きで要素を取得したい 次のようなHTMLで、divのclassが「b」内のh2の要素が「ccc」の場合のdivのクラスが「d」の要素を取得したいのです。 つまり下の例では、「111」と「333」を取得したいです。 queryにどのように記述すれば良いのでしょうか？ $document =<<<EOF <div class=a> <div class=b> <h2 class=c>ccc</h2> <div class=d>111</div> </div> <div class=b> <h2 class=c>ccc[a]</h2> <div class=d>222</div> </div> <div class=b> <h2 class=c>ccc</h2> <div class=d>333</div> </div> </div> EOF; $xpath = new DOMXPath($document); $xpath->query('ここの記述が知りたい');
- ベストアンサー
- PHP
- Divの入れ子とHeight
こんにちわ。初歩的な質問かもしれませんがお願いします。 DivのContainerの中にPosition:Absoluteの３つのDivを入れ子にしたいんですが、Containerの高さを中身のDivの高さに依存する形にしたいのですが、うまくいきません。 Containerの高さと中身のコンテンツの高さをAutoにした場合、中身のほうは内容に依存する形で高さが自動になるんですが、Containerのほうがうまくいきません。FloatをつかわずにPosition:Absoluteでして、Containerを中身の高さに依存、という風にする方法はないのでしょうか？ こちらがコードです。 HTML CODE <HTML> <HEAD> <link rel="stylesheet" href="hp.css" type="text/css" /> </HEAD> <BODY> <div class="container"> <div class="banner"> </div> <div class="menu"> </div> <div class="main"> a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br> </div> </div> </BODY> </HTML> CSS CODE * {margin:0;padding: 0;} div.container{border:2px solid RGB(888888); position: absolute; top:20px; left:50px; width:900px; height:auto;} div.banner { position: absolute; top:20px; left:80px; width:700px; height:150px; border:2px solid RGB(888888);} div.menu{ position: absolute; top:190px; left:30px; width:150px; height:300px; font-weight:bold; border:2px solid RGB(888888);} div.main{ position:absolute; top:190px; left:200px; width:600px; height:auto; border:2px solid RGB(888888);}
- ベストアンサー
- HTML
- height:100%を使用してボーダーで囲む
下記のソースのボーダー代替で使用している部分 body { padding: 5px 5px 0 5px; background:#000; } .container:last-child { border-bottom: solid 5px #000; } を削除し body { border: solid 5px #000; } もしくは他の要素を追加で ボーダー(border: solid 5px #000;)で表示させること出来ないでしょうか？ *#headerを画面一杯に表示させたいのでhtml,body,#headerにはheight:100%,width: 100%;を掛けています。 *HTMLソース (インデントの代わりにアンダースコアを使用しているので戻してください) <body> __<div id="header" class="container"> ____<div class="inner"> ______<header> ________<p>Header</p> ______</header> ____</div> __</div> __<div class="container"> ____<div class="inner"> ______<section> ________<p>Section-1st<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p> ______</section> ____</div> __</div> __<div class="container"> ____<div class="inner"> ______<section> ________<p>Section-2nd<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p> ______</section> ____</div> __</div> __<div class="container"> ____<div class="inner"> ______<section> ________<p>Section-3rd<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p> ______</section> ____</div> __</div> __<div id="footer" class="container"> ____<div class="inner"> ______<footer> ________<p>Footer<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p> ______</footer> ____</div> __</div> </body> *CSSソース * { margin: 0; padding: 0; box-sizing: border-box; } body, html { width: 100%; height: 100%; } body { padding: 5px 5px 0 5px; background: #000; } .container { width: 100%; height: auto; background: #fff; } .inner { max-width: 960px; width: 100%; height: auto; margin: 0 auto; } .container:first-child { width: 100%; height: 100%; background: #3498db; } .container:last-child { border-bottom: solid 5px #000; }
- 締切済み
- CSS
- floatのクリアについて
以下のように「test1」,「test2」というclassを「test」の中で左右に 配置したのですが、一番最後のh2にあるclassのclearが反映されずfloatを 解除することが出来ません。（IEの７では解除できましたが、FireFoxの 3.0.11での解除が出来ません） 「test」の</div>直前に<br class="test3" />を入れると解除されるので すが、<br>を使わずに解除する方法はありますでしょうか？ 現在の希望は以下の方法での解除か、「test1」にclearを設定し「test」を 下に続けて並べたいと考えています。 ご教授よろしくお願いします。 ■■■HTML■■■ <div id="test"> <div class="test1"> <img src="画像" width="100" height="100" /> </div> <div class="test2"> <p>test2</p> </div> </div> <h2 class="test3">test</h2> ■■■CSS■■■ #test { width: 500px; margin: 0 0 20px 0; } .test1 { float: left; width: 100px; margin: 0 10px; padding: 0; } .test2 { float: left; width: 380px; margin: 0; padding: 0; } .test3 { width: 500px; clear: both; }
- 締切済み
- HTML
- 楽天トラベルAPIで特定県の検索サイト作成
楽天トラベルAPIを使って特定の県の宿泊施設検索をＰＨＰで作っていますが、地域選択のプルダウンが表示されない状況です。 HTML部のソースはつぎのとおりですが、誤っている箇所はないと思うのですが、どなたか指摘をお願いします。 大半のソースはhttp://www.pulp-studio.net/archives/200/を流用しています。 <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>県の宿泊施設検索サービス</title> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" href="./travel.css" type="text/css" /> </head> <body> <div id="container"><!-- container --> <div id="header"> <h1>県の宿泊施設検索サービス</h1> </div> <div id="headerline">宿泊施設検索（楽天トラベル 施設検索API 利用）</div> <div class="contents"><!-- contents --> <!-- ■フォーム開始 --> <form action="./travelg.php" method="post"> <table class="form_table"> <tr> <td class="form_left"> <div class="tablebox"> </div> </td> <td class="form_right"> <div class="tablebox"> </div> </td> </tr> <tr> <td class="form_left"> <div class="tablebox" style="text-align: left;">選択した地域やオプションで<br />宿泊施設を検索・表示します。<br /><font color="red"><b>地域は必ず選択<br />してください</b></font><br />※地域選択ボックスが表示されな<br />い時は、ブラウザの更新ボタンを<br />何度か押してみてください</div> </td> <td class="form_right"> <div class="tablebox"> <table align="left"> <tr> <td> <!-- ▼地域選択開始▼ --> <div class="classcode"> ▼地域選択▼ <div id="middleClassList"></div> <div id="smallClassList"></div> <div id="detailClassList"></div> </div> </td> <td> <div class="squeezecode1"> ▼オプション選択（複数選択可）▼<br /> <input id="sq1" type="checkbox" name="squeeze[]" value="onsen" /> <label for="sq1"> 温泉のある宿泊施設</label><br /> <input id="sq2" type="checkbox" name="squeeze[]" value="daiyoku" /> <label for="sq2"> 大浴場のある宿泊施設</label><br /> <input id="sq3" type="checkbox" name="squeeze[]" value="kinen" /> <label for="sq3"> 禁煙ルームがある宿泊施設</label><br /> <input id="sq4" type="checkbox" name="squeeze[]" value="internet" /> <label for="sq4"> インターネットに接続出来る宿泊施設</label> </div> </td> <td> <div class="squeezecode2"> <br /> <input id="sq5" type="checkbox" name="squeeze[]" value="breakfast" /> <label for="sq5"> 朝食のある宿泊施設</label><br /> <input id="sq6" type="checkbox" name="squeeze[]" value="dinner" /> <label for="sq6"> 夕食のある宿泊施設</label><br /><br /> <input class="search_button" type="submit" name="submit" value="検索" /> </div> </td> </tr> </table> <!-- ▲地域選択終了▲ --> <br clear="all" /> </div> </td> </tr> <tr> <td class="form_left"> <div class="tablebox"> </div> </td> <td class="form_right"> <div class="tablebox"> <!-- Rakuten Dynamicad FROM HERE --> <script type="text/javascript"> <!-- rakuten_template = "s_468_60_txt"; rakuten_affiliateId = "04701d1e.da0f7792.04701d21.8f900d36"; rakuten_service = "travel"; rakuten_target = "_blank"; rakuten_color_bg = "FFFFFF"; rakuten_color_border = "CCCCCC"; rakuten_color_text = "000000"; rakuten_color_link = "0000FF"; rakuten_color_price = "CC0000"; //--></script> <script type="text/javascript" src="http://dynamic.rakuten.co.jp/js/rakuten_dynamic.js"> </script> <!-- Rakuten Dynamicad TO HERE --> </div> </td> </tr> </table> </form> <!-- ■フォーム終了 --> </div><!-- /contents --> <!-- ▼検索結果表示▼ --> <div class="contents"><!-- contents --> <div class="query_status"> <!-- 検索・初期表示 --> <div class="notfound"> - <a href="http://travel.gajin.jp" title="Copyright" target="_blank" style="font-size:0.8em;">GAJINトラベル</a> - </div> <!-- /検索・初期表示 --> </div> </div><!-- /contents --> <!-- □API検索結果表示 --> <div id="footer">○○県の宿泊施設検索サービス</div> </div><!-- /container --> <script type="text/javascript" src="./trvApi_GetAreaClass.js" charset="utf-8"></script> </body> </html>
- 締切済み
- PHP
お礼
実現することができました。ありがとうございます。 最後の質問ですが、 条件にひっかからないときに「見つかりませんでした」 という案内がほしいと思い、追加してみました。 if (v && n) { l = d.querySelectorAll ('#BUKKEN > li > ol > li:nth-of-type(' + n + ')'); ～～～～～～～ }, {min: +t[0], max: +t[1]}); break; }else{ document.getElementById(#BUKKEN).innerHTML = "見つかりませんでした"; } 動きませんでした。 そんな単純なことではないのでしょうか。