htmlのソースコードにselect文にreadonly=""とされているが、実行すると選択リストが表示されるやり方を教えてください。

Question

###前提・実現したいこと
ここに質問したいことを詳細に書いてください
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

「http://svtsim.com/svtsim.html」というサイトを見て、同じようなものができないかと思い、ソースを調べました。
しかし、ソース59行目の
<select id="scenario" readonly=""></select>
が理解できません。
このサイトではどのようにして[Nomal sinus rhythm]や[Sick sinus syndrome]などの選択タブを入れ込んでいるのでしょうか？
インポートしているjsファイルも調べてみましたがselectで表示される文言はありませんでした。
どなたかご教授ください。

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

エラーメッセージ

同じものをローカルに作成してオフラインで起動すると
Channels definition was not found.
Model.js was not found.
と出力されます。
※jquery.min.js部分はローカルで使用できるようにソース変更済み

###該当のソースコード

ここにご自身が実行したソースコードを書いてください

            <table bgcolor="#DDCCCC" width="100%">
                <tbody><tr><td align="center" bgcolor="#FFAAAA">Scenario</td></tr>
                <tr><td>            
                    <select id="scenario" readonly=""></select>
                    <br>
                    <input value="Surprise Me!" id="surprise_me" type="button">
                    <input value="Reveal!" id="reveal" type="button">
                    <br>
                    <div style="display: none">
                        <input id="randomize" type="checkbox" >Randomize the scenario    
                    </div>
                </td></tr>
            </tbody></table>

###試したこと
課題に対してアプローチしたことを記載してください

ローカルに同じものを作成して実行してみましたが、グラフの表示がされませんでした。
シナリオが選択できないことが原因。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

HTML
javascript
Jquery

Answer 1

少しだけ補足を…。

select要素にreadonly属性は存在しないので、仮にそれを与えたとしても、何の効果もありません。readonly属性を持つことができるのは、input要素とtextarea要素の2つです。

ですので、もし「readonly属性がある」という点に少しでも着目"してしまった"のであれば、ご覧になったサイトが誤っているだけですので、この属性については忘れてください。

【参考】
HTML 5.1: Index
https://www.w3.org/TR/html51/fullindex.html#attributes-table

Answer 2

新米プログラマーにつき仕事のための問題解決能力の修行として私に回答できそうな質問を探している中で当質問をお見かけいたしました。
ですので回答形式・回答内容等で不足・間違いなどがある可能性がほかの回答者様よりも高い事を先にお詫びして、回答させていただきます。

おそらく鍵は「svtsim-3.3-min.js」にあると思われます。

まず、質問の59行目のタグには"scenario"というidがついているため、そのidがどう使われているのかを調べるために、同html内で「Ctrl+F」を使い、"scenario"の使用箇所を検索します。コメントも含めると計７箇所で使われているようですが、質問の内容に関わるような処理を実行していると思しき箇所は見つかりません。

なので、今度はがいぶファイルを同様の方法で検索します。
すると「svtsim-3.3-min.js」にて、

～var e=b.scenarios[c].caption;$("#scenario").append('<option value="'+c+'" class="scenario">'+e+"</option>")}$("#scenario").append('<option value="s_surprise" class="scenario">Surprise Me!</option>')～

という指定idタグ内部に引数の処理を追加するjQueryによるappend関数を用いてoptionタグを挿入する記述が見つかります。
おそらくこの記述が質問の処理を行っているのではないかと思われます。

Comments

[Ushop]

回答ありがとうございました。
Jqueryについて知識が足りませんでした。
append関数でoptionタグ挿入されて、valueとselectタグが入るのですね。
通常のソースでは<select id="scenario" readonly=""></select>のみなのになんで、開発者ツールで見るソースで
～<option class="scenario" value="s_nsr">Normal sinus rhythm</option>～
と出てくるのか疑問が解けました。
趣味の片手間プログラマーには敷居が高いですが、希望のものが作れそうです。
ありがとうございました。