Onchange 从下拉菜单 -> 从字段

Question

我真的对JS一无所知。我在 excel 中做了一个计算，但我在我的 www 上看到了它。我决定从 .net 复制示例。我一步一步地改变了大部分事情。现在我被卡住了......

我的表单开头有 3 个字段：

<li id="li_14">
<label class="description" for="cena_on">CON </label>
<div>
<!-- HERE USER SET PRICE 1 -->
€ <input id="cena_on" type="text" maxlength="255" value="" />
</div>
</li>
<li id="li_15">
<label class="description" for="cena_pb">CPB</label>
<div>
<!-- HERE USER SET PRICE 2 -->
€ <input id="cena_pb" type="text" maxlength="255" value="" />
</div>
</li>
<li id="li_16">
<label class="description" for="cena_lpg">CLPG </label>
<div>
<!-- HERE USER SET PRICE 3 -->
€ <input id="cena_lpg" type="text" maxlength="255" value="" />
</div>
</li>

此字段是正确进行所有计算所必需的。 稍后用户需要使用下拉菜单选择一个选项。此选项的值取自前 3 个字段。

        <div>
<select id="element_21" onChange="pali"> 
              <option value="cena_on1" >ON</option>
              <option value="cena_pb1" >PB</option>
              <option value="cena_lpg1" >LPG</option>
        </select>
        </div>

因为我不能自己制作 JS 我尝试了很多例子来制作它，我试图以某种方式设置 cena_on = cena_on1。一开始完全不同，但经过 20++ 次测试后，所有的值都很奇怪，我很困惑。 :S

例如如何制作： 如果来自字段 1 的 cena_on 为 1 cena_bp 为 2 而 cena_lpg 是 3

那么下拉选项ON也是1，PB 2和lpg 3？然后我可以将这个选定的值用于我的计算。

  var PAL = (element_21 * 12);
  $('#PAL').text(PAL);

Answer 1

当您指向 $ 符号时，我假设您正在使用 Jquery。所以：

$(document).ready(function(){
  $("#element_21").change(function(){
  // Detect what option is selected (also remove 1 from its value)
  var fieldId="#" + $(this).val().replace("1","");

  // Jump to the input field with same id extracted above:
  var userinput= $(fieldId).val();

  //Do your calculations
  var PAL = (userinput * 12);
  $('#PAL').text(PAL);
})
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="li_14">
<label class="description" for="cena_on">CON </label>
<div>
<!-- HERE USER SET PRICE 1 -->
€ <input id="cena_on" type="text" maxlength="255" value="" />
</div>
</li>
<li id="li_15">
<label class="description" for="cena_pb">CPB</label>
<div>
<!-- HERE USER SET PRICE 2 -->
€ <input id="cena_pb" type="text" maxlength="255" value="" />
</div>
</li>
<li id="li_16">
<label class="description" for="cena_lpg">CLPG </label>
<div>
<!-- HERE USER SET PRICE 3 -->
€ <input id="cena_lpg" type="text" maxlength="255" value="" />
</div>
</li>
<br>

<div>
<select id="element_21"> 
      <option value="cena_on1" >ON</option>
      <option value="cena_pb1" >PB</option>
      <option value="cena_lpg1" >LPG</option>
</select>
<br><br>
Result:<br>
<div id="PAL"></div>
</div>

如果您希望在更改 input 值时实时更新最终结果，请在更改输入后立即在 <select> 上触发假 onChange：

$("#cena_on,#cena_pb,#cena_lpg").on("input paste keyup",function(){
   $("#element_21").trigger("change");
})