根据两个<select>选项更改<p>的值

Question

我需要通过更改两个选项＆lt; select＆gt;来更改价格标签。 例如： 如果有人在第一个＆lt; select＆gt;中选择Silver 1和第二个＆lt; select＆gt;中的Silver 3然后＆lt; p＆gt;值＆lt; / p＆gt;必须是＆lt; p＆gt; 21＆lt; / p＆gt;。 如果第二个＆lt; select＆gt;中的选项低于第一个＆lt; select＆gt;中的选项它必须是＆lt; p＆gt; ERROR＆lt; / p＆gt; 这是我的HTML： ＆＃13; ＆＃13; ＆lt; select class =＆＃34; form-control input-sm＆＃34;名称=＆＃34; CURRENT_TIER＆＃34; ID =＆＃34; current_rank＆＃34;＆GT;＆＃13;    ＆lt;选择选项=＆＃34;＆＃34; value =＆＃34; silver_i＆＃34;＆gt; Silver I＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; silver_ii＆＃34;＆gt; Silver II＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; silver_iii＆＃34;＆gt; Silver III＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; silver_iv＆＃34;＆gt; Silver IV＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; silver_elite＆＃34;＆gt; Silver Elite＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; silver_elite_master＆＃34;＆gt; Silver Elite Master＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; gold_nova_i＆＃34;＆gt; Gold Nova I＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; gold_nova_ii＆＃34;＆gt; Gold Nova II＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; gold_nova_iii＆＃34;＆gt; Gold Nova III＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; gold_nova_master＆＃34;＆gt; Gold Nova Master＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; master_guardian_i＆＃34;＆gt; Master Guardian I＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; master_guardian_ii＆＃34;＆gt; Master Guardian II＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; master_guardian_elite＆＃34;＆gt; Master Guardian Elite＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; distinguished_master_guardian＆＃34;＆gt;杰出的Master Guardian＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; legendary_eagle＆＃34;＆gt; Legendary Eagle＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; legendary_eagle_master＆＃34;＆gt; Legendary Eagle Master＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; supreme_master_first_class＆＃34;＆gt; Supreme Master First Class＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; global_elite＆＃34;＆gt; Global Elite＆lt; / option＆gt;＆＃13; ＆LT; /选择＆GT;＆＃13; ＆＃13; ＆lt; select class =＆＃34; form-control input-sm＆＃34;命名=＆＃34; future_rank＆＃34; ID =＆＃34; order_rank＆＃34;＆GT;＆＃13;    ＆lt;选择选项=＆＃34;＆＃34; value =＆＃34; silver_ii＆＃34;＆gt; Silver II＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; silver_iii＆＃34;＆gt; Silver III＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; silver_iv＆＃34;＆gt; Silver IV＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; silver_elite＆＃34;＆gt; Silver Elite＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; silver_elite_master＆＃34;＆gt; Silver Elite Master＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; gold_nova_i＆＃34;＆gt; Gold Nova I＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; gold_nova_ii＆＃34;＆gt; Gold Nova II＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; gold_nova_iii＆＃34;＆gt; Gold Nova III＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; gold_nova_master＆＃34;＆gt; Gold Nova Master＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; master_guardian_i＆＃34;＆gt; Master Guardian I＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; master_guardian_ii＆＃34;＆gt; Master Guardian II＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; master_guardian_elite＆＃34;＆gt; Master Guardian Elite＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; distinguished_master_guardian＆＃34;＆gt;杰出的Master Guardian＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; legendary_eagle＆＃34;＆gt; Legendary Eagle＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; legendary_eagle_master＆＃34;＆gt; Legendary Eagle Master＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; supreme_master_first_class＆＃34;＆gt; Supreme Master First Class＆lt; / option＆gt;＆＃13;    ＆lt; option value =＆＃34; global_elite＆＃34;＆gt; Global Elite＆lt; / option＆gt;＆＃13; ＆LT; /选择＆GT;＆＃13; ＆＃13; ＆lt; p id =＆＃34; finalvalue＆＃34;＆gt;最终价值＆lt; / p＆gt;＆＃13; ＆＃13; ＆＃13;

Answer 1

我会这样做：

     <select class="form-control input-sm" name="current_tier" id="current_rank">
                                    <option selected=""value="1">SilverI</option>
                                    <option value="2"> Silver II</option>
                                    <option value="3">Silver III</option>
                                    <option value="4">Silver IV</option>
                                    <option value="5">Silver Elite</option>
                                    <option value="6">Silver Elite Master</option>
                                    <option value="7">Gold Nova I</option>
                                    <option value="8">Gold Nova II</option>
                                    <option value="9">Gold Nova III</option>
                                    <option value="10">Gold Nova Master</option>
                                    <option value="11">Master Guardian I</option>
                                    <option value="12">Master Guardian II</option>
                                    <option value="13">Master Guardian Elite</option>
                                    <option value="14">Distinguished Master Guardian</option>
                                    <option value="15">Legendary Eagle</option>
                                    <option value="16">Legendary Eagle Master</option>
                                    <option value="17">Supreme Master First Class</option>
                                    <option value="18">Global Elite</option>
                                </select>

            <select class="form-control input-sm" name="future_rank" id="order_rank">
                                    <option selected="" value="2">Silver II</option>
                                    <option value="3">Silver III</option>
                                    <option value="4">Silver IV</option>
                                    <option value="5">Silver Elite</option>
                                    <option value="6">Silver Elite Master</option>
                                    <option value="7">Gold Nova I</option>
                                    <option value="8">Gold Nova II</option>
                                    <option value="9">Gold Nova III</option>
                                    <option value="10">Gold Nova Master</option>
                                    <option value="11">Master Guardian I</option>
                                    <option value="12">Master Guardian II</option>
                                    <option value="13">Master Guardian Elite</option>
                                    <option value="14">Distinguished Master Guardian</option>
                                    <option value="15">Legendary Eagle</option>
                                    <option value="16">Legendary Eagle Master</option>
                                    <option value="17">Supreme Master First Class</option>
                                    <option value="18">Global Elite</option>
                                </select>

            <p id="finalvalue">Final Value</p>
            <button type="button" id="btnForChosing">Click Me!</button>

    <script type="text/javascript">

        var btn = document.getElementById("btnForChosing");
        btn.onclick= function(){
        var finalValue = document.getElementById("finalvalue");      
        var curRank = document.getElementById("current_rank");
        var selectedCurRank= curRank.options[curRank.selectedIndex].value;      
        var orderRank= document.getElementById("order_rank");
        var selectedOrderRank= orderRank.options[orderRank.selectedIndex].value;

        if (selectedCurRank > selectedOrderRank)
            finalValue.innerHTML = "error"
}
    </script>

完成你的第一个案例的逻辑，因为我不遵守你在那里使用“21”的逻辑

Answer 2

我不知道你如何得出'21'，但这应该让你开始。第二次更改后，比较所选选项的索引。如果要计算差异的值，则需要对所选选项的值进行基本求和，并将其附加到输出而不是21。

编辑以将值分配给级别并计算第二个选项的更改差异。您可以将值调整为所需的数字。

$('#order_rank').on('change', function() {
  $('#finalvalue').html('Final Value: ');
  var current = +$('#current_rank option:selected').val();
  var future = +$('#order_rank option:selected').val()
  if (current <= future) {
    var value = +future - current;
    $('#finalvalue').append(value);
  } else {
    $('#finalvalue').append('ERROR');
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control input-sm" name="current_tier" id="current_rank">
  <option selected="" value="1">Silver I</option>
  <option value="2">Silver II</option>
  <option value="3">Silver III</option>
  <option value="4">Silver IV</option>
  <option value="5">Silver Elite</option>
  <option value="6">Silver Elite Master</option>
  <option value="7">Gold Nova I</option>
  <option value="8">Gold Nova II</option>
  <option value="9">Gold Nova III</option>
  <option value="10">Gold Nova Master</option>
  <option value="11">Master Guardian I</option>
  <option value="12">Master Guardian II</option>
  <option value="12">Master Guardian Elite</option>
  <option value="14">Distinguished Master Guardian</option>
  <option value="15">Legendary Eagle</option>
  <option value="16">Legendary Eagle Master</option>
  <option value="17">Supreme Master First Class</option>
  <option value="18">Global Elite</option>
</select>

<select class="form-control input-sm" name="future_rank" id="order_rank">
  <option selected="" value="2">Silver II</option>
  <option value="3">Silver III</option>
  <option value="4">Silver IV</option>
  <option value="5">Silver Elite</option>
  <option value="6">Silver Elite Master</option>
  <option value="7">Gold Nova I</option>
  <option value="8">Gold Nova II</option>
  <option value="9">Gold Nova III</option>
  <option value="10">Gold Nova Master</option>
  <option value="11">Master Guardian I</option>
  <option value="12">Master Guardian II</option>
  <option value="13">Master Guardian Elite</option>
  <option value="14">Distinguished Master Guardian</option>
  <option value="15">Legendary Eagle</option>
  <option value="16">Legendary Eagle Master</option>
  <option value="17">Supreme Master First Class</option>
  <option value="18">Global Elite</option>
</select>

<p id="finalvalue">Final Value</p>

Answer 3

以下是解决方案

＆＃13;

＆＃13;

function setOutput(){
  var current_rank  = parseInt($('#current_rank').val()); /*Get current_rank value*/
  var order_rank    = parseInt($('#order_rank').val());   /*Get order_rank value*/

  if (current_rank==order_rank) {
    $('#finalvalue').html(current_rank+' == '+order_rank);
  }else if(current_rank>order_rank){
    $('#finalvalue').html(current_rank+' > '+order_rank);
  }else{
    $('#finalvalue').html(current_rank+' < '+order_rank);
  }
}

$('#current_rank,#order_rank').change(function(){
  setOutput();
});

setOutput();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control input-sm" name="current_tier" id="current_rank">
  <option value="1">Silver I</option>
  <option value="2">Silver II</option>
  <option value="3">Silver III</option>
  <option value="4">Silver IV</option>
  <option value="5">Silver Elite</option>
  <option value="6">Silver Elite Master</option>
  <option value="7">Gold Nova I</option>
  <option value="8">Gold Nova II</option>
  <option value="9">Gold Nova III</option>
  <option value="10">Gold Nova Master</option>
  <option value="11">Master Guardian I</option>
  <option value="12">Master Guardian II</option>
  <option value="13">Master Guardian Elite</option>
  <option value="14">Distinguished Master Guardian</option>
  <option value="15">Legendary Eagle</option>
  <option value="16">Legendary Eagle Master</option>
  <option value="17">Supreme Master First Class</option>
  <option value="18">Global Elite</option>
</select>
<select class="form-control input-sm" name="future_rank" id="order_rank">
  <option value="2">Silver II</option>
  <option value="3">Silver III</option>
  <option value="4">Silver IV</option>
  <option value="5">Silver Elite</option>
  <option value="6">Silver Elite Master</option>
  <option value="7">Gold Nova I</option>
  <option value="8">Gold Nova II</option>
  <option value="9">Gold Nova III</option>
  <option value="10">Gold Nova Master</option>
  <option value="11">Master Guardian I</option>
  <option value="12">Master Guardian II</option>
  <option value="13">Master Guardian Elite</option>
  <option value="14">Distinguished Master Guardian</option>
  <option value="15">Legendary Eagle</option>
  <option value="16">Legendary Eagle Master</option>
  <option value="17">Supreme Master First Class</option>
  <option value="18">Global Elite</option>
</select>

<p id="finalvalue">Final Value</p>

＆＃13;

＆＃13;

＆＃13;

  

注意：现在您可以检查它们并获得实际结果。您可以从setOutput()功能

更改条件