<select>の下に<option>が表示されているか、表示されていないかを判定する方法が知りたい。

前提・実現したいこと

<select>の表示状況を取得したいです。
<select>をクリックすると、<option>で設定した選択肢が<select>の下に表示されますが、その選択肢が「表示されている状態」なのか、「表示される前の状態」なのか、javascriptを使って判定することは可能でしょうか？
もし可能でしたら、方法をご教示いただきたいです。
宜しくお願い致します。

この疑問発生の経緯

プルダウンの選択状態によって、CSSで背景色を変更したいと思っています。

◆<select>（<option>非表示時）の背景

空白選択時：<select>の背景を白にする
空白以外選択時：<select>の背景を赤にする

◆<option>の背景（<option>表示時）

選択中要素：<option>の背景を赤にする
選択外要素：<option>の背景を白にする

（イメージ図）
■空白選択時の<select>の表示

■未選択状態の<option>の表示

■空白以外選択時の<select>の表示

■選択状態の<option>の表示

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5  </head>
6  <style>
7  .highlight_lightpink {
8    background : lightpink;
9  }
10  option.highlight_default {
11    background : white
12  }
13  </style>
14  <body>
15    <select style="width:200px"
16            onClick="onClickSelectChangeColor(this)"
17            data-pulldownOpen="false">
18      <option value="" class="highlight_default">---未選択---</option>
19      <option value="北海道" class="highlight_default">北海道</option>
20      <option value="東京" class="highlight_default">東京</option>
21      <option value="大阪" class="highlight_default">大阪</option>
22    </select>
23  </body>
24  
25  <script>
26  
27// プルダウンのselect要素とoption要素の背景色を変更する
28function onClickSelectChangeColor(selectElem) {
29  
30  // 背景色を設定するクラス
31  var HIGH_LIGHT_COLOR_CLASS = "highlight_lightpink";
32  var HIGH_LIGHT_DEFAULT_CLASS = "highlight_default";
33  
34  // プルダウンが開いているか閉じているか
35  var openFlg =  parseStrToBoolean(selectElem.getAttribute("data-pulldownOpen"));
36  
37  // 選択中のoptionの値
38  var selectedVal = getSelectValue(selectElem);
39  
40  // 開いている場合
41  if (openFlg) {
42    //「空」を選択している場合
43    if (selectedVal=="") {
44      // select要素の背景色にデフォルトを設定
45      selectElem.classList.remove(HIGH_LIGHT_COLOR_CLASS);
46    } else {
47      // select要素の背景色に赤を設定
48      selectElem.classList.add(HIGH_LIGHT_COLOR_CLASS);
49    }
50  }
51  
52  // option要素の背景色を設定
53  var children = selectElem.children;
54  for (var i=0; i < children.length; i++) {
55    if (children[i].tagName=="OPTION") {
56      // 選択中の要素の場合
57      if (children[i].selected) {
58        // 選択中の要素が「空」の場合
59        if (selectedVal=="") {
60          // option要素の背景色にデフォルトを設定
61          children[i].classList.replace(HIGH_LIGHT_COLOR_CLASS, HIGH_LIGHT_DEFAULT_CLASS);
62        } else {
63          // option要素の背景色に赤を設定
64          children[i].classList.replace(HIGH_LIGHT_DEFAULT_CLASS, HIGH_LIGHT_COLOR_CLASS);
65        }
66      // 選択中でない要素の場合
67      } else {
68        // option要素の背景色にデフォルトを設定
69        children[i].classList.replace(HIGH_LIGHT_COLOR_CLASS, HIGH_LIGHT_DEFAULT_CLASS);
70      }
71    }
72  }
73  // 開いているか閉じているかのフラグを変更
74  selectElem.setAttribute("data-pulldownOpen", (!openFlg));
75}
76
77// SELECTタグの値を取得する
78function getSelectValue(selectElem) {
79  var options = selectElem.children;
80  for (var i=0; i<options.length; i++) {
81    var optionValue = options[i].value;
82    if (options[i].selected==true) {
83      return options[i].value;
84    }
85  }
86  return null;
87}
88
89// 文字列をbooleanに変換
90function parseStrToBoolean(str) {
91  // 文字列を判定
92  return (str == "true") ? true : false;
93}
94  </script>
95</html>

試したこと

要件を実現するために、プルダウンのCSSを変化させるコードを書くところまではできました。しかし、このコードが正しく動く大前提として、「<select>の表示状況を取得」が必要です。
上記のコードでは、<select>にdata属性を持たせて、そのフラグによって表示状態の判定を行っています（フラグは、プルダウンのクリックイベント時に更新するようにしています）。
しかし、実際にフラグが変わるべきタイミングは、プルダウンのクリック時だけではありません。画面の他要素クリック時などもあります。
<select>のonChangeや、<option>のonClickなども検討しましたが、要件を満たす実装は思いつきませんでした。

「<select>の表示状況を取得」は、上記の私のコードで要件を満たすために必要なものなので、要件さえ満たせれば、全く別の方法でも問題は解決します。