ウォッチ
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万未満
を検索条件で選択した場合、
その２つの条件に該当したものにまとめられる。
といったようにしたいです。
No.9ベストアンサー
- 回答日時：
しつもんしゃさんがじぶんでかいておいた、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>
-
-
- 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 = "見つかりませんでした";
}
動きませんでした。
そんな単純なことではないのでしょうか。
No.10
- 回答日時：
なんでもかんでもスクリプトでおこなうのは、たやすいことですが、ぐげんします。
ぶっけんりすとのさいご（けんさくにさゆうされない）に、
「お探しの物件は見つかりませんでしたか？物件が表示されない場合は、条件を換えてもう一度検索してみてください。」のように、どちらともとれるひょうげんにするとか・・・
さいしょのせっけいとはちがい、つけやきばのついかしょりのれんぞくなので、あとだしでいわれると・・・
もうすでに、「なんだこれ？」れべるのコードになっています。
それと、innerHTML でかきかえてはいけません。なぜならぶっけんりすとがすべてきえてしまいます
たのかたのいけんもとりいれて、あらためてしつもんなさってはどうでしょう？
もうだれものぞきつづけていないでしょうし。
-
-
- 1
- 件
-
いろいろとありがとうございました。
とても助かりました。
教えて頂いたコードを使わせて頂きます。
より良いものになるよう他の方の意見も参考にしたいと思います。
No.7
- 回答日時：
う～ん、なんだかな～。
（ださくになるよ？）まず、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'; }
);
}
いまみなおすと、おすすめできるこーどでは、なさそうなのだけど・・・
-
-
- 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>
No.5
- 回答日時：
あたらしめのぶらうざで。
ぜんかくくうはくははんかくに。<!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>
-
-
- 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>
No.4
- 回答日時：
サンプルは４８パターンを定義しています。
最初は、すべての要素をHTML内からJavaScriptで読み込もうと思いましたが、すべての要素を
配列内に定義してみました。
配列内の要素を、順番に従って、divブロックに定義します。
４００件ということは、それだけで、コーディングが大変ですよ。
-
-
- 0
- 件
-
No.3
- 回答日時：
<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ブロックは最初と最後のみ記載しました。
-
-
- 0
- 件
-
具体的に作成していただき、ありがとうございます。
さっそく試してみたところ、動作しましたが、
気になる点がいくつかありました。
初めに白紙の状態で検索すると物件が現れますが、
できれば、物件情報は初めに全て見せたいです。
物件の情報変更や増減が激しく頻繁に更新する予定ですが、
修正箇所を少なくしたいです。
No.2
- 回答日時：
すみません。
自宅の環境では、JavaScriptがうまく動作しません。もしよければ、明日の夜までお待ちください。
会社のPCでサンプルを作成します。
しかし、なぜJavaScriptにこだわるのか、教えてください。
表示件数200件ということは、元データは何件でしょうか？
JavaScriptだけで実現するということは、
元データすべてをHTML内に記述しなければなりません。
ファイル容量が激増するとともに、ソースファイルを参照する
ことで、すべてのデータがユーザに可視化されてしまいますよ。
業務につかうにせよ。個人がつかうにせよ。見た目にも凝りたいの
であれば、サーバープログラムとの併用を考えてください。
-
-
- 0
- 件
-
ありがとうございます。
>JavaScriptにこだわるのか、教えてください。
JavaScriptとHTMLしか部分的に分かりません。
サーバーサイドのプログラムは分かりません。
興味もあり勉強して覚えたいですが、
今は時間がないのででJavaScriptのみで実現したいと考えました。
>表示件数200件ということは、元データは何件でしょうか？
多くても全部で400件以内になると思います。
>ファイル容量が激増するとともに、ソースファイルを参照する
>ことで、すべてのデータがユーザに可視化されてしまいますよ。
プログラムを全て見られることでセキュリティの弱点になるということでしょうか。
個人情報はまったくのせないので大丈夫だと思います。
>見た目にも凝りたいのであれば、
>サーバープログラムとの併用を考えてください。
400物件もあると動作が重くなってしまうのでしょうか。
>会社のPCでサンプルを作成します。
ありがとうございます。
よろしくお願いいたします。
No.1
- 回答日時：
質問者さまのスキルレベルにもよりますが、JavaScriptだけで可能かと言われれば、
可能です。
すべての候補の表示を非表示にします。
すべての候補のすべての要素に名前を付けます、
選択条件を元に、ｉｆ文でチェックして、該当物件だけ非表示を表示にします。
但し、一般的にはサーバープログラム ＶＢ等 と データベースを使用します。
検索条件により、データベースを検索し、抽出したデータを表示しています。
-
-
- 0
- 件
-
早急なアドバイス有難うございます。
すべての候補の表示を非表示にします。
すべての候補のすべての要素に名前を付けます、
選択条件を元に、ｉｆ文でチェックして、該当物件だけ非表示を表示にします。
イメージがわかないのですが、
そういったサンプルのようなものはありますでしょうか。
できればjavascriptだけでなんとかしたいです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！
似たような質問が見つかりました
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- Excel（エクセル） PHPプログラムをエクセルに張り付けると検索ボックスがでてくる！ 3 2022/05/08 07:10
- HTML・CSS imgとpを縦・横に中央揃えする 1 2023/01/17 11:30
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- PHP ここでの ②if($su_d<>"")の比較演算子 を使う理由は 1 2022/03/26 02:33
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- PHP htmlspecialcharsが機能していないです。 バグですか？ 1 2022/04/05 01:22
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・「みんな教えて! 選手権!!」開催のお知らせ
- ・漫画をレンタルでお得に読める！
- ・【選手権お題その2】この漫画の2コマ目を考えてください
- ・2024年に成し遂げたこと
- ・３分あったら何をしますか？
- ・何歳が一番楽しかった？
- ・治せない「クセ」を教えてください
- ・【大喜利】看板の文字を埋めてください
- ・【大喜利】【投稿～12/17】 ありそうだけど絶対に無いことわざ
- ・【選手権お題その１】これってもしかして自分だけかもしれないな…と思うあるあるを教えてください
- ・【穴埋めお題】恐竜の新説
- ・我がまちの「給食」自慢を聞かせてっ！
- ・冬の健康法を教えて！
- ・一番好きな「クリスマスソング」は？
- ・集合写真、どこに映る？
- ・自分の通っていた小学校のあるある
- ・フォントについて教えてください！
- ・これが怖いの自分だけ？というものありますか？
- ・スマホに会話を聞かれているな！？と思ったことありますか？
- ・それもChatGPT！？と驚いた使用方法を教えてください
- ・見学に行くとしたら【天国】と【地獄】どっち？
- ・これまでで一番「情けなかったとき」はいつですか？
- ・この人頭いいなと思ったエピソード
- ・あなたの「必」の書き順を教えてください
- ・10代と話して驚いたこと
- ・14歳の自分に衝撃の事実を告げてください
- ・人生最悪の忘れ物
- ・あなたの習慣について教えてください！！
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
全てのselect要素をデフォルト...
-
JavaScriptで<select>の<option...
-
javascriptでセルを矩形で選択する
-
複数のプルダウンを1つにまとめ...
-
連想配列を使ってコンボボック...
-
selectが変更されたらnameを指...
-
プルダウン連動とリンク
-
プルダウンメニューに連動する...
-
javascriptでセレクトボックス...
-
selectboxとcheckbox連動
-
セレクトボタンで特定の項目で...
-
jsでは、'で区切った部分を改行...
-
リストボックス内の重複したも...
-
webページの一部のみの更新につ...
-
<input>の選択肢をプルダウンメ...
-
phpと連動させるには？
-
動的なセレクトボックスの生成...
-
VBScriptでHTMLのセレクトボッ...
-
selectを変更不可にしたい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
<input>の選択肢をプルダウンメ...
-
javascriptでセレクトボックス...
-
VBScriptでHTMLのセレクトボッ...
-
全てのselect要素をデフォルト...
-
Selectボックスの一覧表示方法
-
selectを変更不可にしたい
-
同じ名前のセレクトがある場合...
-
スマホのフォームでのselect複...
-
<select> をmultiple にしてい...
-
selectが変更されたらnameを指...
-
select要素のvalueを配列で取得...
-
プルダウンの選択値により活性...
-
ラジオボタンの選択に応じてプ...
-
まったく同じ<select>フォーム...
-
JavaScriptで<select>の<option...
-
ラジオボタンの値が取得できな...
-
プルダウンの値によって活性・...
-
webページの一部のみの更新につ...
-
今日の日付を自動的にセレクト...
おすすめ情報
