- ベストアンサー
javascriptを使って<div>内の文字を絞り込む方法
- javascriptを使って、<div>内に含まれる特定の文字だけを表示させる方法を教えてください。
- idやclassを使わずに、<div>内の文字のみを判断する方法を知りたいです。
- ドロップダウンで選択した文字に一致する<div>のみを表示させたいです。
- kiseki777
- お礼率80% (211/261)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
No.2 お礼より。 失礼ながら、私は制作代行をするつもりはありません。せめて、ご自分で「このようにやってみたが、ここがうまいくいかない」という質問の形にはなりませんか。 // modify onload="document.forms[0].elements['GEHO'].selectedIndex = 0;" // add if (v === '-') { while ((p = ps[i++])) { p.style.display = ''; } } // add <option>-</option>
その他の回答 (2)
- Chaire
- ベストアンサー率60% (79/130)
No.1 お礼より。 イベントハンドラを書くときの大原則は「イベントオブジェクトを第一引数にとれ」です。また、特に理由がなければ、this 値を event.currentTarget に合わせます。つまり、こうです。 ... function sample(event) { ... onchange="sample.call(this, event);" まあ、今回は event を使ってないので this 値だけ合わせれば十分ですけどね。
お礼
できました。有難うございます。 ちなみに、 サンプルでは初めから絞り込みがされていますが、 ページを開いたときは絞り込まずにすべて表示させ、 その後絞り込みをさせるということも可能でしょうか。
- Chaire
- ベストアンサー率60% (79/130)
[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>
お礼
[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>
お礼
できました。 有難うございました。