如何从javascript中的select选项中获取第二个值

时间:2016-10-10 21:30:29

标签: javascript html split

如何获得“investortype”的第二个值并在“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”下拉菜单中读取第二个值,但是我很难做到这一点。

<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>

编辑:添加了HTML。

1 个答案:

答案 0 :(得分:0)

<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>
define(foo, w19)