プロが教えるわが家の防犯対策術！

サイト内の物件を複数の検索条件で絞り込む方法

解決済

  • 質問者：tekkenman7
  • 質問日時：
  • 回答数：10件

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万未満
を検索条件で選択した場合、
その２つの条件に該当したものにまとめられる。

といったようにしたいです。

通報する

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

質問の本文を隠す

A 回答 (10件)

No.9ベストアンサー

  • 回答者： babu_baboo
  • 回答日時：

しつもんしゃさんがじぶんでかいておいた、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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

実現することができました。ありがとうございます。
最後の質問ですが、
条件にひっかからないときに「見つかりませんでした」
という案内がほしいと思い、追加してみました。


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 = "見つかりませんでした";
　}

動きませんでした。
そんな単純なことではないのでしょうか。

通報する
お礼日時：2011/10/08 13:20

No.10

  • 回答者： babu_baboo
  • 回答日時：

なんでもかんでもスクリプトでおこなうのは、たやすいことですが、ぐげんします。



ぶっけんりすとのさいご（けんさくにさゆうされない）に、
「お探しの物件は見つかりませんでしたか？物件が表示されない場合は、条件を換えてもう一度検索してみてください。」のように、どちらともとれるひょうげんにするとか・・・

さいしょのせっけいとはちがい、つけやきばのついかしょりのれんぞくなので、あとだしでいわれると・・・
もうすでに、「なんだこれ？」れべるのコードになっています。


それと、innerHTML でかきかえてはいけません。なぜならぶっけんりすとがすべてきえてしまいます


たのかたのいけんもとりいれて、あらためてしつもんなさってはどうでしょう？
もうだれものぞきつづけていないでしょうし。
    • good
    • 1
    • 件
通報する
この回答へのお礼

いろいろとありがとうございました。
とても助かりました。
教えて頂いたコードを使わせて頂きます。

より良いものになるよう他の方の意見も参考にしたいと思います。

通報する
お礼日時：2011/10/08 16:23

No.8

  • 回答者： babu_baboo
  • 回答日時：

できれば、ていせいを。



「わけありですが、鈍感であれば見えません。」ではなく、

「なにより見えない人には、格安物件です」にするべきだったと。
    • good
    • 1
    • 件
通報する

No.7

  • 回答者： babu_baboo
  • 回答日時：

う～ん、なんだかな～。

（ださくになるよ？）
まず、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'; }
　);
}

いまみなおすと、おすすめできるこーどでは、なさそうなのだけど・・・
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
教えてもらったようにやってみましたが
動作しませんでした。
一番下にその修正をのせてあります。

自分なりにあれこれいじり、

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>

通報する
お礼日時：2011/10/08 03:05

No.6

  • 回答者： babu_baboo
  • 回答日時：

ごめんなさい。

ていせいです。
へんすう t が、グローバルでした。
var でもつけてください。
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： babu_baboo
  • 回答日時：

あたらしめのぶらうざで。

ぜんかくくうはくははんかくに。
<!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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

具体的なサンプルを作成していただき、ありがとうございます。
さっそく組み込んでみました。
ちゃんと動作しました。
現在では、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>

通報する
お礼日時：2011/10/07 15:20

No.4

  • 回答者： kokorone
  • 回答日時：

サンプルは４８パターンを定義しています。


最初は、すべての要素をHTML内からJavaScriptで読み込もうと思いましたが、すべての要素を
配列内に定義してみました。
配列内の要素を、順番に従って、divブロックに定義します。

４００件ということは、それだけで、コーディングが大変ですよ。
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： kokorone
  • 回答日時：

<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ブロックは最初と最後のみ記載しました。
    • good
    • 0
    • 件
通報する
この回答へのお礼

具体的に作成していただき、ありがとうございます。
さっそく試してみたところ、動作しましたが、
気になる点がいくつかありました。

初めに白紙の状態で検索すると物件が現れますが、
できれば、物件情報は初めに全て見せたいです。

物件の情報変更や増減が激しく頻繁に更新する予定ですが、
修正箇所を少なくしたいです。

通報する
お礼日時：2011/10/07 15:29

No.2

  • 回答者： kokorone
  • 回答日時：

すみません。

自宅の環境では、JavaScriptがうまく動作しません。
もしよければ、明日の夜までお待ちください。
会社のPCでサンプルを作成します。

しかし、なぜJavaScriptにこだわるのか、教えてください。
表示件数200件ということは、元データは何件でしょうか？
JavaScriptだけで実現するということは、
元データすべてをHTML内に記述しなければなりません。
ファイル容量が激増するとともに、ソースファイルを参照する
ことで、すべてのデータがユーザに可視化されてしまいますよ。

業務につかうにせよ。個人がつかうにせよ。見た目にも凝りたいの
であれば、サーバープログラムとの併用を考えてください。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。

>JavaScriptにこだわるのか、教えてください。

JavaScriptとHTMLしか部分的に分かりません。
サーバーサイドのプログラムは分かりません。
興味もあり勉強して覚えたいですが、
今は時間がないのででJavaScriptのみで実現したいと考えました。



>表示件数200件ということは、元データは何件でしょうか？

多くても全部で400件以内になると思います。



>ファイル容量が激増するとともに、ソースファイルを参照する
>ことで、すべてのデータがユーザに可視化されてしまいますよ。

プログラムを全て見られることでセキュリティの弱点になるということでしょうか。
個人情報はまったくのせないので大丈夫だと思います。



>見た目にも凝りたいのであれば、
>サーバープログラムとの併用を考えてください。

400物件もあると動作が重くなってしまうのでしょうか。



>会社のPCでサンプルを作成します。

ありがとうございます。
よろしくお願いいたします。

通報する
お礼日時：2011/10/03 09:44

No.1

  • 回答者： kokorone
  • 回答日時：

質問者さまのスキルレベルにもよりますが、JavaScriptだけで可能かと言われれば、


可能です。
すべての候補の表示を非表示にします。
すべての候補のすべての要素に名前を付けます、
選択条件を元に、ｉｆ文でチェックして、該当物件だけ非表示を表示にします。

但し、一般的にはサーバープログラム　ＶＢ等　と　データベースを使用します。
検索条件により、データベースを検索し、抽出したデータを表示しています。
    • good
    • 0
    • 件
通報する
この回答へのお礼

早急なアドバイス有難うございます。

すべての候補の表示を非表示にします。
すべての候補のすべての要素に名前を付けます、
選択条件を元に、ｉｆ文でチェックして、該当物件だけ非表示を表示にします。

イメージがわかないのですが、
そういったサンプルのようなものはありますでしょうか。
できればjavascriptだけでなんとかしたいです。

通報する
お礼日時：2011/10/02 08:20

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報