javascriptのselectオプションから2番目の値を取得する方法

Question

"investortype"の2番目の値を取得して "exploremax"内に表示するにはどうすればよいですか？

<script type="text/javascript"> 
    function $(id) { 
     return document.getElementById(id); 
    } 

    function addCommas(nStr) // adds commas for long numbers in function explore().. eg. 123456 = 123,456 
    { 
     nStr += ''; 
     x = nStr.split('.'); 
     x1 = x[0]; 
     x2 = x.length > 1 ? '.' + x[1] : ''; 
     var rgx = /(\d+)(\d{3})/; 
     while (rgx.test(x1)) { 
      x1 = x1.replace(rgx, '$1' + ',' + '$2'); 
     } 
     return x1 + x2; 
    } 

    function explore() { // this function will calculate how much credits_all and credits_2_all it costs to explore "total". In addition to that I’d also like it to show exploremax.. but it doesn’t work. 

     var value = document.getElementById(investortype).value; 
     var split = value.split(":"); 
     var v1 = split[0]; 
     var v2 = split[1]; 

     var toexplore = Number($("toexplore").value); 
     var total = Number($("total").value); 
     var exploremax = Math.round(((total * 0.12 * v2) * 1)/1); 
     var credit = Math.round(((total * 0.51 * v1) + 700) * Math.pow(10, 10))/Math.pow(10, 10); 
     var credit_2 = Math.round(((total * 0.51 * v1) + 850) * Math.pow(10, 10))/Math.pow(10, 10); 
     var credit_all = addCommas(Math.round((toexplore * credit) * 1)/1); 
     var credit_2_all = addCommas(Math.round((toexplore * credit_2_all) * 1)/1); 
     var show_exploremax = addCommas(exploremax); 

     if ((toexplore == "" || toexplore == null) && (total == "" || total == null)) { 
      $("credit_all").innerHTML = "Error"; 
      $("credit_2_all").innerHTML = "Error"; 
      $("show_exploremax").innerHTML = "Error"; 
     } else { 
      $("credit_all").innerHTML = credit_all; 
      $("credit_2_all").innerHTML = credit_2_all; 
      $("show_exploremax").innerHTML = show_exploremax; 
     } 
    } 
</script> 

私はHTMLを追加しました。 "show_exploremax"は "investortype"ドロップダウンメニューから2番目の値を読み込むことになっていますが、それを行うには問題があります。

<form action="" id="explore_cost"> 
<p> 
<table width="50%" cellspacing="0px" align="center"> 
<tbody> 
    <tr> 
     <td colspan="2" align="center"><b>Land Explore Cost</b></td> 
    </tr>  
    <tr> 
     <td>Investor type:</td> 
     <td align="center"><select id="investortype" class="dropdown"> 
       <option value="1:1">Standard</option> 
       <option value="1.2:0.5">Invasive</option> 
       <option value="1.1:0.9">Economist</option> 
       <option value="0.1:9.99">Self-sufficient</option> 
       <option value="1:1">2nd credit</option> 
       <option value="1.1:1">Researcher</option> 
     <!-- I tried to split the values with ":" -->   
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td >Amount of Land:</td> 
     <td align="center"><input id="total" type="text" /></td> 
    </tr> 
    <tr> 
     <td>Land to explore:</td> 
     <td align="center"><input id="toexplore" type="text" /></td> 
    </tr>        
    <tr> 
     <td>Credit Needed:</td> 
     <td>&nbsp;&nbsp;<font id="credit_all"></font></td> 
    </tr> 
    <tr> 
     <td>2nd credit Needed:</td> 
     <td>&nbsp;&nbsp;<font id="credit_2_all"></font></td> 
    </tr> 
    <tr> 
     <td>Explore max:</td> 
     <td>&nbsp;&nbsp;<font id="show_exploremax"></font></td> 
    </tr> 
    <tr><br /> 
     <td align="center" colspan="2"><input type="button" value="Submit" class="button1" onclick="explore()" /></td> 
    </tr>  
</tbody> 

EDIT：追加のhtml。オフサイトのリンクにあなたの質問の本質的な部分を置く

Answer 1

document.addEventListener("DOMContentLoaded", init, false); 
 

 
function init() 
 
{ 
 
    var select = document.getElementById('investortype'); 
 
    select.addEventListener("change", function() { 
 
    var option = select.options[select.selectedIndex]; 
 
    document.getElementById('show_exploremax').innerText = option.dataset.max; 
 
    }, false); 
 
    select.selectedIndex = -1; 
 
};

<h4>Pick One</h4> 
 
<select id="investortype" class="dropdown"> 
 
    <option data-credit="1" data-max="1">Standard</option> 
 
    <option data-credit="1.2" data-max="0.5" >Invasive</option> 
 
    <option data-credit="1.1" data-max="0.9" >Economist</option> 
 
    <option data-credit="0.1" data-max="9.99" value="0.1:9.99">Self-sufficient</option> 
 
    <option data-credit="1" data-max="1">2nd credit</option> 
 
    <option data-credit="1.1" data-max="1">Researcher</option> 
 
</select> 
 

 
<h4>2nd option:</h4> 
 
Max: <span id="show_exploremax"></span>