Question

我有这个简短形式，当用户选择下拉菜单中的第一个选项时，将出现三个字段。第一个字段具有默认值，而其他两个字段应由用户填充。然后我需要获得三个字段的总数。如果用户选择第二个选项，则不会显示三个字段。截至目前，这就是我所拥有的：

HTML

<select id="select1">
    <option value="A">New</option>
    <option value="B>Satisfied</option>
</select>

<div id="d1>
    <label>This is a default value</label><input type="text" id="input1" placeholder="$75,000" style="width: 100px;"/>
    <label>Preferred Value:</label><input type="text" id="input2" value="" style="width: 100px;"/>
    <label>Number of Contributors:</label><input type="text" id="input3" value="" style="width: 100px;"/>
    <label>Total:</label><input type="text" id="txt1" value=""/>
</div>

jquery的

$("#select1").change(function(){
        if($(event.target).val() == 'A'){
            $('#d1').show();
        }else{
            $('#d1').hide();
        }
    });

JS

function total(){
    var a = $("#input1").val();
    var b = $("#input2").val();
    var c = $("#input3").val();

    var d = parseFloat(a, 10);
    var e = parseFloat(a, 10);
    var f = parseFloat(a, 10);

    total = d + e + f;
    $('#txt1').val(total.toFixed(2));$(
}

Answer 1

如上所述，我不清楚问题是什么。我假设你的问题是它不起作用。看看你的代码不会。我重新写了一些你的东西，我认为这就是你要找的东西

$("#select1").change(function(event){
  if($(this).val() == 'A'){
    $('#d1').show();
  }else{
    $('#d1').hide();
  }
});

$("input").blur(function(){
  total();
});

function total(){
  var a,b,c = 0;

  var a = $("#input1").val();
  var b = $("#input2").val();
  var c = $("#input3").val();

  if(a != ""){
    var d = parseFloat(a, 10);
  }else{
    var d = 0;
  }

  if(b != ""){
    var e = parseFloat(b, 10);
  }else{
    var e = 0;
  }

  if(c != ""){
    var f = parseFloat(c, 10);
  }else{
    var f = 0;
  }    

  var calcTotal = d + e + f;
   $('#txt1').val(calcTotal.toFixed(2));
}

你得到NaN因为它试图浮动一个不存在的数字。您可以检查该字段是否有值，如果没有渲染0

FIDDLE

<强>更新

这很简单，只需在隐藏div时重置值

NEW FIDDLE

Answer 2

只需复制并粘贴代码即可。它与你的代码相同，我在Jquery中做了一些基本的修改，你的html中也有错误....... plz检查它，它将完美地工作。日Thnx

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script >
 $(document).ready(function() {
 $("#select1").change(function(){
        if($(event.target).val() == 'A'){
            $('#d1').show();
        }else{
            $('#d1').hide();
        }
    });
});

 </script>
<script type="text/javascript">

function total(){

    var a = $("#input1").val();
    var b = $("#input2").val();
    var c = $("#input3").val();

    var d = parseFloat(a, 10);
    var e = parseFloat(a, 10);
    var f = parseFloat(a, 10);

    total = d + e + f;
   document.getElementById('txt1').value=total;
}
</script>

</head>

<body>
<select id="select1">
    <option value="A">New</option>
    <option value="B">Satisfied</option>
</select>

<div id="d1">
    <label>This is a default value</label><input type="text" id="input1" placeholder="$75,000" style="width: 100px;"/>
    <label>Preferred Value:</label><input type="text" id="input2" value="" style="width: 100px;"/>
    <label>Number of Contributors:</label><input type="text" id="input3" value="" style="width: 100px;"/>
    <label>Total:</label><input type="text" id="txt1" value="" onclick="total();" />
</div>
</body>
</html>

Answer 3

试试这个：并且请更改你的HTML也会有一些错误，比如选择B你还没有关闭"。

$("#select1").change(function(event){
    if($(event.target).val() == 'A'){
        $('#d1').show();
    }else{
        $('#d1').hide();
   $('#txt1').val(0);

    }
});

$("input").on('blur',function(){
total();
	
});

function total(){
    var a = $("#input1").val();
    var b = $("#input2").val();
    var c = $("#input3").val();
    var total=0;
if(a.length > 0){
    var d = parseFloat(a, 10);
    total=total+d;
}
if(b.length > 0){
    var e = parseFloat(b, 10);
    total=total+e;
}
if(c.length > 0){
    var f = parseFloat(c, 10);	
    total=total+f;
}

    $('#txt1').val(total.toFixed(2));

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
    <option value="A">New</option>
    <option value="B">Satisfied</option>
</select>

<div id="d1">
    <label>This is a default value</label><input type="text" id="input1" placeholder="$75,000" style="width: 100px;" >
    <label>Preferred Value:</label><input type="text" id="input2" value="" style="width: 100px;" />
    <label>Number of Contributors:</label><input type="text" id="input3" value="" style="width: 100px;" />
    <label>Total:</label><input type="text" id="txt1" value=""/>
</div>

Answer 4

尝试

jQuery(function($) {
  $("#select1").change(function() {
    $('#d1').toggle($(this).val() == 'A');
  });

  $('#input1, #input2, #input3').change(total)

  function total() {
    var a = $("#input1").val();
    var b = $("#input2").val();
    var c = $("#input3").val();

    var d = parseFloat(a, 10) || 0;
    var e = parseFloat(b, 10) || 0;
    var f = parseFloat(c, 10) || 0;

    total = d + e + f;
    $('#txt1').val(total.toFixed(2));
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="select1">
  <option value="A">New</option>
  <option value="B">Satisfied</option>
</select>
<div id="d1">
  <label>This is a default value</label>
  <input type="text" id="input1" placeholder="$75,000" style="width: 100px;" />
  <label>Preferred Value:</label>
  <input type="text" id="input2" value="" style="width: 100px;" />
  <label>Number of Contributors:</label>
  <input type="text" id="input3" value="" style="width: 100px;" />
  <label>Total:</label>
  <input type="text" id="txt1" value="" />
</div>

添加输入值和默认值

4 个答案: