从下拉列表中更改 - >来自现场

时间:2018-03-03 16:24:51

标签: javascript html field onchange dropdown

我真的对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);

1 个答案:

答案 0 :(得分:0)

当你指向$ sign时,我假设你正在使用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值时对最终结果进行实时更新,请在更改输入后立即在onChange上触发假<select>

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