使用两个下拉列表的输出在多个位置创建文本 [英] using output from two drop down lists to create text in multiple places

问题描述

我有几个下拉列表，如下所示:

I have several drop down lists as follows:

<select name="dropdown" id="dropdown">
      <option value="1000">1000</option>
      <option value="2000">2000</option>
      <option value="3000">3000</option>
      <option value="4000">4000</option>

</select>

<select name="dropdown2" id="dropdown2">
      <option value="12">12</option>
      <option value="24">24</option>
      <option value="36">36</option>
      <option value="48">48</option>

</select>

我正在尝试使用下拉菜单中的输出在页面上的其他位置创建文本.因此，例如，如果用户选择1000和24-我可以显示某些输出.如果他们选择1000和36，则内容将不同.结果是16种不同批次的输出(基于上述下拉选项).

I am trying to use the output from dropdowns to create text elsewhere on the page. So for example if a user selects 1000 and 24 - I can display certain output. if they select 1000 and 36, the content will be different. 16 different lots of output will be the result (based on above drop down options).

如果不使用数据库，我将无法找到最简单的方法来实现这一目标.理想情况下，我只想使用内联代码.

I can't work out the most simple way to achieve this without using a database. Ideally I want to use just inline code.

谢谢

阿伦

推荐答案

这是一个jquery解决方案:

Here is a jquery solution:

$(function() {
    var firstValue = $('#dropdown').val();
    var secondValue = $('#dropdown2').val();
    
    $('#labelOne').text(firstValue);
    $('#labelTwo').text(secondValue);
    $('#total').text(firstValue * secondValue);
   
    $('#dropdown').on('change', function(){
        firstValue = $('#dropdown').val();
    	$('#labelOne').text(firstValue);
        $('#total').text(firstValue * secondValue);
    });
  
    $('#dropdown2').on('change', function(){
        secondValue = $('#dropdown2').val();
    	$('#labelTwo').text(secondValue);
        $('#total').text(firstValue * secondValue);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="dropdown" id="dropdown">
      <option value="1000">1000</option>
      <option value="2000">2000</option>
      <option value="3000">3000</option>
      <option value="4000">4000</option>
</select>
<select name="dropdown2" id="dropdown2">
      <option value="12">12</option>
      <option value="24">24</option>
      <option value="36">36</option>
      <option value="48">48</option>
</select>
<span id="labelOne"></span> *
<span id="labelTwo"></span> =
<span id="total"></span>

这篇关于使用两个下拉列表的输出在多个位置创建文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！