Question

我有一个下拉选择字段和其他字段。就像这样，

<div class="form-group"><label class="sr-only" for="id_max_size">Max 
   Size</label><select name="max_size" title="" required class="form-control" id="id_max_size">
       <option value="" disabled selected>Size ↓</option>
       <option value="10">AAA</option>
       <option value="20">BBB</option>
       <option value="30">CCC</option>
       <option value="40">DDD</option>
    </select>
  </div>

 <input type="number" name="no_needed" title="" required id="id_no_needed" step="0.01" />
 <input type="number" name="total_price" title="" required id="id_total_price" step="0.01" />

让我们说用户选择AAA，我希望获得“AAA”的价值。这是10并乘以＆＃39; no_needed＆＃39;用户插入的字段值，并将结果插入total_price字段。即使用户选择CCC，它也应遵循相同的过程。

$(document).ready(function () {
   $('select').on('change', function() {
   $('.sr-only').text($('select[name=max_size]').val() * 
   ($('select[name=no_needed]').val()));
  });

 });

它无法正常工作。我真的不懂javascript。我该如何做到这一点？

Answer 1

名称为print("Enter text to translate:", end ="") sentence = input () replaced = sentence.replace("", "x") print(replaced)的元素为no_needed，而非input。

select

因此，您的选择器应为<input type="number" name="no_needed" title="" required id="id_no_needed" step="0.01" />，而不是input[name=no_needed]。

同样，要选择名称为select[name=no_needed]的输入，选择器将为total_price。此外，由于您打算设置它的值，而不是设置其input[name=total_price]，因此您需要设置.text()。

请参阅更新的代码段：

＆＃13;

.val()

＆＃13;

$(document).ready(function() {
  $('select').on('change', function() {
    $('input[name=total_price]').val($('select[name=max_size]').val() *
      ($('input[name=no_needed]').val()));
  });

});

＆＃13;

此外，您可以在<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="form-group"><label class="sr-only" for="id_max_size">Max Size</label><select name="max_size" title="" required class="form-control" id="id_max_size"> <option value="" disabled selected>Size ↓</option> <option value="10">AAA</option> <option value="20">BBB</option> <option value="30">CCC</option> <option value="40">DDD</option> </select> </div> <input type="number" name="no_needed" title="" required id="id_no_needed" step="0.01" /> <input type="number" name="total_price" title="" required id="id_total_price" step="0.01" />输入上设置更改事件处理程序，以更新总价格，即使尺寸没有变化：

＆＃13;

no_needed

＆＃13;

function recalculatePrice() {
  $('input[name=total_price]').val(
    ($('select[name=max_size]').val() *
    $('input[name=no_needed]').val()).toFixed(2)
  );
}

$(document).ready(function() {
  $('select').on('change', function() {
    recalculatePrice();
  });
  
  $('input[name=no_needed]').on('input', function() {
    if($(this).val()) {
      if(!isNaN($(this).val())) {
        recalculatePrice();  
      } else {
        $(this).val(""); 
      }
    }
  });
});

＆＃13;

Answer 2

您可以在选择中使用.val()获取所选选项的值。然后，您需要将select和“no needed”输入的值转换为整数或浮点数，以便将它们相乘。

当没有设置值时，我还添加了回退到0。

$(document).ready(function () {
   $('#id_max_size').on('change', function() {
       var selectedValue = parseFloat($(this).val()) || 0,
           noNeededValue = parseFloat($('#id_no_needed').val()) || 0;
       $('#id_total_price').val(selectedValue * noNeededValue);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group"><label class="sr-only" for="id_max_size">Max 
   Size</label><select name="max_size" title="" required class="form-control" id="id_max_size">
       <option value="" disabled selected>Size ↓</option>
       <option value="10">AAA</option>
       <option value="20">BBB</option>
       <option value="30">CCC</option>
       <option value="40">DDD</option>
    </select>
  </div>

 <input type="number" name="no_needed" title="" required id="id_no_needed" step="0.01" />
 <input type="number" name="total_price" title="" required id="id_total_price" step="0.01" />

Answer 3

你有一些错误：

您正在使用free选择输入 - 请改用select。
您可以使用$('input')来引用事件侦听器回调中的相关this元素。

试试这个：

select

Answer 4

这是另一种解决方案。使用一些常用代码。

这是一个小提琴的链接。 https://jsbin.com/cemafiqapi/edit?js,output

$(document).ready(function () {
     $('select').on('change', process);

     $('#id_no_needed').on('change', process);

    function process (e) {
      var factor = $('#id_no_needed').val() || 0;
      var selected = Number($('#id_max_size').val()) || 0;
      $('#id_total_price').val(factor * selected)
     }

});

计算值OnSelect＆amp;更新

4 个答案: