从下拉菜单更改 - >从字段

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");
})

从下拉菜单更改 - >从字段

Onchange from dropdown -> from field

html

javascript

field

onchange

dropdown