みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

一致する文字を見つけ、それのみ表示させる方法

javascriptを使って<body>内の<div>に含まれる文字と一致するものを絞り込み、残りは非表示にする方法を教えてください。
ドロップダウンで文字を選びOKボタンを押すと
あ の場合は<div>内の「あ」が1つなので1つだけ表示され
い は2つあるので2つ表示され
う は3つ、というように
idやclassをつけて判断させるのではなく、中身の文字のみを判断できるようにしたいです。

<html>
<head>
<title></title>
<script type="text/javascript">

</script>
</head>
<body>
<form>
<select>
<option value="">あ</option>
<option value="">い</option>
<option value="">う</option>
</select>
<input type="button" value="OK" onclick="">
</form>
<div>あ</div>
<div>い</div>
<div>う</div>
<div>い</div>
<div>う</div>
<div>う</div>
</body>
</html>

投稿日時 - 2011-10-25 00:09:17

QNo.7092631

すぐに回答ほしいです

質問者が選んだベストアンサー

No.2 お礼より。

失礼ながら、私は制作代行をするつもりはありません。せめて、ご自分で「このようにやってみたが、ここがうまいくいかない」という質問の形にはなりませんか。

// modify
onload="document.forms[0].elements['GEHO'].selectedIndex = 0;"

// add
if (v === '-') {
 while ((p = ps[i++])) {
  p.style.display = '';
 }
}

// add
<option>-</option>

投稿日時 - 2011-10-26 15:26:23

お礼

できました。
有難うございました。

投稿日時 - 2011-10-27 09:28:51

ANo.3

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

No.1 お礼より。

イベントハンドラを書くときの大原則は「イベントオブジェクトを第一引数にとれ」です。また、特に理由がなければ、this 値を event.currentTarget に合わせます。つまり、こうです。

...
function sample(event) {
...
onchange="sample.call(this, event);"

まあ、今回は event を使ってないので this 値だけ合わせれば十分ですけどね。

投稿日時 - 2011-10-25 21:01:01

お礼

できました。有難うございます。
ちなみに、
サンプルでは初めから絞り込みがされていますが、
ページを開いたときは絞り込まずにすべて表示させ、
その後絞り込みをさせるということも可能でしょうか。

投稿日時 - 2011-10-26 00:14:18

ANo.1

[IE6, Fx1, Op7, Sa1]

<!DOCTYPE html>
<title>TEST</title>

<body onload="document.forms[0].elements['GEHO'].onchange();">

<form action="#">
 <p>
  <select name="GEHO" onchange="

var v = this.value || this.options[this.selectedIndex].text;
if (! v) return;

var divs = this.ownerDocument.body.getElementsByTagName('div');
var div;
var i = 0;
while ((div = divs[i++])) {
 if (div.textContent === v || div.innerText === v) {
  div.style.display = '';
 }
 else {
  div.style.display = 'none';
 }
}
  ">
   <option>あ</option>
   <option>い</option>
   <option>う</option>
  </select>
 </p>
</form>

<div>あ</div>
<div>い</div>
<div>う</div>
<div>い</div>
<div>う</div>
<div>う</div>

---
[Fx 3.6, Sa 4.1]

<!DOCTYPE html>
<title>TEST</title>

<style type="text/css">
@media only screen {
 *[aria-hidden="true"] { display: none }
}
</style>

<script type="application/javascript">
new function () {
 this.TRIGGER = 'select[name="GEHO"][aria-controls]';

 this.handleEvent = function (e) {
  switch (e.type) {

  case 'DOMContentLoaded' :
   var triggers = e.target.querySelectorAll(this.TRIGGER);
   var I = triggers.length;
   var i;
   for (i = 0; i < I; i++) {
    this.processTrigger(triggers[i]);
   }
   return;

  case 'change' :
   var trigger = e.target;
   if (trigger.matchesSelector(this.TRIGGER)) { // moz-, webkit-
    this.processTrigger(trigger);
   }
   return;
  }
 };

 this.processTrigger = function (select) {
  var d = select.ownerDocument;
  var v = select.value;
  var ids = select.getAttribute('aria-controls').trim().split(/[\t\r\n\x20]+/);
  var idCount = ids.length;
  var i;
  for (i = 0; i < idCount; i++) {
   var els = d.querySelectorAll('#' + ids[i] + '\x20' + '*'); //XSS
   var el;
   var j;
   for (j = 0; el = els[j]; j++) {
    el.setAttribute('aria-hidden', String (el.textContent !== v));
   }
  }
 };

 document.addEventListener('DOMContentLoaded', this, false);
 document.addEventListener('change', this, false);
};
</script>

<form action="#">
 <p>
  <select name="GEHO" aria-controls="HOGE">
   <option>あ</option>
   <option>い</option>
   <option>う</option>
  </select>
 </p>
</form>

<div id="HOGE">
 <p>あ</p>
 <p>い</p>
 <p>う</p>
 <p>い</p>
 <p>う</p>
 <p>う</p>
</div>

投稿日時 - 2011-10-25 06:37:23

お礼

[IE6, Fx1, Op7, Sa1]側がよかったです。
ただ、
<select>のonchange内に全て書かれているのを
<head>に記述したく、試してみましたが動きませんでした。
その場合はどうしたらいいのでしょうか。

<title>TEST</title>
<script type="text/javascript">
function sample() {
var v = this.value || this.options[this.selectedIndex].text;
if (! v) return;

var divs = this.ownerDocument.body.getElementsByTagName('div');
var div;
var i = 0;
while ((div = divs[i++])) {
 if (div.textContent === v || div.innerText === v) {
  div.style.display = '';
 }
 else {
  div.style.display = 'none';
 }
}
}
</script>
</head>
<body onload="document.forms[0].elements['GEHO'].onchange();">

<form action="#">
 <p>
  <select name="GEHO" onchange="sample()">
   <option>あ</option>
   <option>い</option>
   <option>う</option>
  </select>
 </p>
</form>

<div>あ</div>
<div>い</div>
<div>う</div>
<div>い</div>
<div>う</div>
<div>う</div>

投稿日時 - 2011-10-25 10:32:40