HTML5とJSのドロップダウンメニュー入力を追加する最も簡単な方法は何ですか？

Question

私のウェブサイトの2次入力方法に問題があります。私はドロップダウンメニューを作ったが、何かをする方法を理解することはできない。

function secondaryOutput() { 

     } 
    </script> 
      <!--The <select> tag is a drop-down menu for a secondary input method.--> 
      <select> 
       <option value="1"; id="1"; onclick="secondaryOutput()"; class="Second">1</option> 
       <option value="2"; id="2"; onclick="secondaryOutput()"; class="Second">2</option> 
       <option value="3"; id="3"; onclick="secondaryOutput()"; class="Second">3</option> 
       <option value="4"; id="4"; onclick="secondaryOutput()"; class="Second">4</option> 
       <option value="5"; id="5"; onclick="secondaryOutput()"; class="Second">5</option> 
       <option value="6"; id="6"; onclick="secondaryOutput()"; class="Second">6</option> 
       <option value="7"; id="7"; onclick="secondaryOutput()"; class="Second">7</option> 
       <option value="8"; id="8"; onclick="secondaryOutput()"; class="Second">8</option> 
       <option value="9"; id="9"; onclick="secondaryOutput()"; class="Second">9</option> 
       <option value="10"; id="10"; onclick="secondaryOutput()"; class="Second">10</option> 
       <option value="11"; id="11"; onclick="secondaryOutput()"; class="Second">11</option> 
       <option value="12"; id="12"; onclick="secondaryOutput()"; class="Second">12</option> 
       <option value="13"; id="13"; onclick="secondaryOutput()"; class="Second">13</option> 
       <option value="14"; id="14"; onclick="secondaryOutput()"; class="Second">14</option> 
       <option value="15"; id="15"; onclick="secondaryOutput()"; class="Second">15</option> 
       <option value="16"; id="16"; onclick="secondaryOutput()"; class="Second">16</option> 
       <option value="17"; id="17"; onclick="secondaryOutput()"; class="Second">17</option> 
       <option value="18"; id="18"; onclick="secondaryOutput()"; class="Second">18</option> 
       <option value="19"; id="19"; onclick="secondaryOutput()"; class="Second">19</option> 
       <option value="20"; id="20"; onclick="secondaryOutput()"; class="Second">20</option> 
       <option value="21"; id="21"; onclick="secondaryOutput()"; class="Second">21</option> 
       <option value="22"; id="22"; onclick="secondaryOutput()"; class="Second">22</option> 
       <option value="23"; id="23"; onclick="secondaryOutput()"; class="Second">23</option> 
       <option value="24"; id="24"; onclick="secondaryOutput()"; class="Second">24</option> 
       <option value="25"; id="25"; onclick="secondaryOutput()"; class="Second">25</option> 
       <option value="26"; id="26"; onclick="secondaryOutput()"; class="Second">26</option> 
       <option value="27"; id="27"; onclick="secondaryOutput()"; class="Second">27</option> 
       <option value="28"; id="28"; onclick="secondaryOutput()"; class="Second">28</option> 
       <option value="29"; id="29"; onclick="secondaryOutput()"; class="Second">29</option> 
       <option value="30"; id="30"; onclick="secondaryOutput()"; class="Second">30</option> 
       <option value="31"; id="31"; onclick="secondaryOutput()"; class="Second">31</option> 
       <option value="34"; id="34"; onclick="secondaryOutput()"; class="Second">34</option> 
       <option value="35"; id="35"; onclick="secondaryOutput()"; class="Second">35</option> 
       <option value="36"; id="36"; onclick="secondaryOutput()"; class="Second">36</option> 
       <option value="37"; id="37"; onclick="secondaryOutput()"; class="Second">37</option> 
       <option value="38"; id="38"; onclick="secondaryOutput()"; class="Second">38</option> 
      </select> 

アイテムの1つが選択されている場合、そのアイテムにsecondaryOutput（）関数を実行させたいとします。私はその後、それを実行した項目を識別するためにsecondaryOutput（）を使い、その項目の番号を変数に渡します。

Answer 1

option毎にonclickイベントをhtmlで追加することはお勧めできません。代わりにeventListenerとchangeイベントを使用してください。 selectの値が変更されると、valueまたはコンソールに必要なものが記録されます。ここで

var select = document.getElementById('select'); 
 
select.addEventListener('change', function(){ 
 
    console.log(this.value); 
 
});

<select id='select'> 
 
    <option value="1" id="1" class="Second">1</option> 
 
    <option value="2" id="2" class="Second">2</option> 
 
    <option value="3" id="3" class="Second">3</option> 
 
</select>