从现场下拉式->的变化

Question

我真的对JS一无所知。我在excel上做了一次，但我在我的www上做了。我决定复制.net中的示例。我一步一步地改变了大部分事情。现在我被困在..。

我的表格上有三个字段：

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

需要此字段才能正确地进行所有计算。稍后，用户需要使用下拉菜单来选择一个选项。此选项的值取自这三个第一个字段。

        <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

那么下拉选项也是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");
})