リストボックスを連動し、2つ目のリストボックスにリンクを貼り付けしたい。

前提

HTMLとJavascriptでホームページを作成しています。
初心者のため、Jqueryは使用していません。

実現したいこと

リストAで表を選択するとリストBでは表の一覧、
リストAでグラフを選択するとリストBではグラフの一覧がリストに出力され、
リストBの結果をボタンクリックすると表やグラフへのリンク先へジャンプするようにしたいものです。

発生している問題・エラーメッセージ

リストボックスの連動は問題ありませんが、リンク先へ移動しません。

エラーメッセージ

該当のソースコード

<select id="style"> <option value="">選択してください <option value="sheet">表 <option value="graph">グラフ 　<option value="engraph">円グラフ </select> <select id="type"> <option value="">選択してください</option> </select> <input type="button" value="クリックでファイルが開きます" onClick="link_open()"> <script> var array = new Array(); array[''] = new Array({cd:"0", label:"選択してください"}); array["sheet"] = new Array( {cd:"1", label:"表１",<li><a href="https://www.yahoo.co.jp"></Li>}, {cd:"2", label:"表２"}, {cd:"3", label:"表３"}, {cd:"4", label:"表４"}, {cd:"5", label:"表５"} ); array["graph"] = [ {cd:"1", label:"グラフ１"}, {cd:"2", label:"グラフ２"}, {cd:"3", label:"グラフ２－１"}, {cd:"4", label:"グラフ２－２"}, {cd:"5", label:"グラフ３"}, {cd:"5", label:"グラフ４"} ]; array["engraph"] = [ {cd:"1", label:"円グラフ１"}, {cd:"2", label:"円グラフ２"}, {cd:"3", label:"円グラフ３"}, {cd:"4", label:"円グラフ４"}, {cd:"5", label:"円グラフ５"} ]; document.getElementById('style').onchange = function(){ type = document.getElementById("type"); type.options.length = 0 var changedPref = style.value; for (let i = 0; i < array[changedPref].length; i++) { var op = document.createElement("option"); value = array[changedPref][i] op.value = value.cd; op.text = value.label; type.appendChild(op); } } <!-- function link_open(){ linkurl=document.lin.navi.value; window.open(linkurl,"_blank","toolbar=1, location=1, directories=1, status=1, menubar=1, scrollbars=1, resizable=1");} // --> </script>

試したこと

リストボックスの連動と、リストボックスへのリンクは
それぞれ作成するとうまく動作するのですが、
リストボックスを連動させて、そのリストボックスからリンク先への移動がうまくいきません。
リストボックスを１つだけにして、<option value="リンク先">はリンク先へ行きますが、
リストボックスを連動させるために、scriptでリストをoption　value　からCD””に置き換えてリンクを貼っても動作しません。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。