またもや、横道にそれる。 - babu_babu

「サイト内の物件を複数の検索条件で絞り込む方法」
http://oshiete.goo.ne.jp/qa/7046739.html
「javascriptのみでコンテンツを絞り込みたい」
http://oshiete.goo.ne.jp/qa/7059228.html
オブジェクトの繋がりを伝えあう、作ってみないと理解できません。
言葉に表現されると余計に、身にしみます。
<!DOCTYPE html>
<html lang="ja">
<title></title>
<style>
#NONE { display:none}
</style>

<body>
<form>
  <ol>
    <li>
      地域:
      <select name="a" onchange="find()">
        <option value="">指定しない
        <option value="神奈川県">神奈川県
        <option value="山梨県">山梨県
        <option value="北海道">北海道
      </select>
      </li>
    
    <li>
      クラス:
      <select name="b" onchange="find()">
        <option value="">指定しない
        <option value="クラスA">クラスA
        <option value="クラスB">クラスB
        <option value="クラスC">クラスC
      </select>
      </li>
    
    <li>
      性別:
      <select name="c" onchange="find()">
        <option value="">指定しない
        <option value="男性">男性
        <option value="女性">女性
      </select>
      </li>

    <li>
      年齢:
      <select name="d" onchange="find()">
        <option value="">指定しない
        <option value="0,20">20歳未満
        <option value="20,30">20歳以上30歳未満
        <option value="30,40">30歳以上40歳未満
        <option value="40,200">40歳以上
      </select>
      </li>

    <li>
      学校名:
      <select name="e" onchange="find()">
        <option value="">指定しない
        <option value="あ">あ
        <option value="い">い
        <option value="う">う
      </select>
      </li>

    <li>
      体重:
      <select name="f" onchange="find()">
        <option value="">指定しない
        <option value="0,50">50kg未満
        <option value="50,60">50kg以上60kg未満
        <option value="60,70">60kg以上70kg未満
      </select>
      </li>

  </ol>
    <img src="" onclick="" alt="検索の実行" onchange="find()">
</form>

<!-- ↓コンテンツ↓ -->
<ul id="HOGE">
  <li>
    <ol>
      <li>地域：神奈川県</li>
      <li>クラスA</li>
      <li>性別：男性</li>
      <li>年齢：25歳</li>
      <li>学校名：あ</li>
      <li>体重：55kg</li>
      <li>名前：ジャバ  スクリプト</li>
    </ol>
  </li>
  
  <li>
    <ol>
      <li>地域：神奈川県</li>
      <li>クラスC</li>
      <li>性別：女性</li>
      <li>年齢：33歳</li>
      <li>学校名：う</li>
      <li>体重：42kg</li>
      <li><em>名前：グー</em></li>
    </ol>
  </li>

</ul>
<div id="NONE">
  <p>コンテンツがありません</p>
</div>


<script>
(function () {
  var A = Array.prototype;
  
  var reg_data_format = /^\s*(.+)：((\d+)?(.+))\s*$/; //ラベル,データ,数値,単位
  var reg_trim = /^\s+|\s+$/g;
  
  function getTextContent (node) { // テキストノードのテキストだけ集める
    return (3 === node.nodeType)
           ? node.data.replace (reg_trim, '') // テキストノードの個々を、trim
           : (node.hasChildNodes ())
             ? A.map.call (node.childNodes, arguments.callee).join ('')
             : '';
  }
  
  function isLiTag (n) { return ('LI' === n.nodeName); } // LI 要素なのか？
  function isTdTag (n) { return ('TD' === n.nodeName); } // TD 要素なのか？


  //_________________________________________
  
  function ListFinder (node, depth) {
    this.node = node;
    this.depth = depth; // 仮に、LI 要素の中にさらに、リスト要素などがあった場合どこまで再帰呼び出しをするか
    this.value = []; // [{ node: element, value: array, selected: boolean }, {}, ..];
  }
  
  
  function setSelected (state) { // value[] の @selected の値の設定
    this.value.forEach (function (v) { v.selected = this.state; }, { state: !!state });
  }
  
  
  function getSelectedNodes () { // selected になっている要素を集める
    return this.value.reduce (
      function (a, v) { return (v.selected) ? a.concat(v.node): a; }, []);
  }
  
  
  function select (cond/*function*/, logic) { // 配列を cond で評価し、selected なノードを返す
    if ((0 === arguments.length) || 
        ('function' !== typeof cond)) return null;
    
    this.value.forEach (function (v) {
      switch (this.logic) {
      case 'and' : case '+' : v.selected = v.selected && (!! this.cond (v)); break;
      case 'or'  : case '-' : v.selected = v.selected || (!! this.cond (v)); break;
      default               : v.selected = !! this.cond (v);
      }
    }, { cond: cond, logic: logic });
    
    return getSelectedNodes.call (this);
  }


  //_________________________________________

  function getChildNodes (li) { // 要素の子ノードを操作して、リスト構造を持つノードに出会ったら再帰的(?)
    var value = [];
    var data, ary, obj;

    for (var node = li.firstChild; node; node = node.nextSibling) {
      switch (node.nodeType) {
      case 1 :
        switch (node.tagName) {
        case 'IMG' :
          node.alt && value.push (node.alt);
          break;
        
        case 'UL' : case 'OL' : case 'TABLE' : case 'DL' :
          (0 < this.depth)
          ? value.push (create (node, this.depth -1).getData ())
          : value.push (getTextContent (node));
        }
        break;
      
      case 3 :
        (data = node.data.replace (reg_trim, ''))
        ? (ary = data.match (reg_data_format))
          ? value.push ({label: ary[1], text: ary[2], number: Number (ary[3]), unit: ary[4]})
          : value.push (data)
        : null;
        break;
      }
    }
    
    return { node: li, value: (1 === value.length) ? value[0]: value, selected: false };// return {node: li, value: value };
  }

  function convertByList () {
    this.value = A.filter.call (this.node.childNodes, isLiTag).map (getChildNodes, this);
  }


  function convertByDl () {;}
  function convertByTable () {;}


  function convert () {
    switch (this.node.tagName) {
    case 'UL' : case 'OL' :
      convertByList.call (this); break;
    
    case 'DL' :
      convertByDl.call (this); break;

    case 'TABLE' :
      convertByTable.call (this); break;
    }
  }

  //_________________________________________

  function create (node, depth) {
    if (0 === arguments.length)
      return null;
    
    var obj = new ListFinder (node, depth);
    var func = new Function;

    convert.call (obj);
    
    func.convert =
      (function () { convert.apply (obj, arguments); });

    func.setSelected =
      (function () { setSelected.apply (obj, arguments); });
    
    func.getData =
      (function () { return obj.value.slice (0); });
    
    func.select =
      (function () { return select.apply (obj, arguments); });
    
    func.getSelectedNodes =
      (function () { return getSelectedNodes.apply (obj, arguments); });

    return func;
  }
  
  //_________________________________________
  
  ListFinder.create = create;
  //_________________________________________

  this.ListFinder = ListFinder;
})();


var finder = ListFinder.create (document.getElementById ('HOGE'),2);


function find () {
  var doc = document;
  var select = doc.getElementsByTagName ('select');
  var cond, value;
  var max, min;
  var mess = doc.getElementById ('NONE');
  var disp;
  
  finder.setSelected (true);// 一旦全てを選択状態にする
  
  if (value = select[0].value)
    finder.select ((function (v) { return (v.value[0].value.text === value); }), 'and');

  if (value = select[1].value)
    finder.select ((function (v) { return (v.value[1].value === value); }), 'and');
  
  if (value = select[2].value)
    finder.select ((function (v) { return (v.value[2].value.text === value); }), 'and');
  
  if (value = select[3].value) {
    value = value.split (',');
    min = Number (value[0]);
    max = Number (value[1]);
    finder.select ((function (v) {var v_ = v.value[3].value.number; return (min<=v_ && v_ <max); }), 'and');
  }

  if (value = select[4].value)
    finder.select ((function (v) { return (v.value[4].value.text === value); }), 'and');
  
  if (value = select[5].value) {
    value = value.split (',');
    min = +value[0];
    max = +value[1];
    finder.select ((function (v) {var v_ = v.value[5].value.number; return (min<=v_ && v_ <max); }), 'and');
  }

  finder.getData ().forEach (
    function (d) { d.node.style.display = (this.indexOf (d.node) < 0) ? 'none': 'list-item'; },
    disp= finder.getSelectedNodes ()
  );
  
  mess.style.display = (disp.length) ? 'none': 'block';
}
</script>
平仮名での回答を面倒だと思ったら、そこで俺の負けかもしれない。