选择后更改值

change value upon select

本文关键字：选择      更新时间：2023-09-26

我的目标是在另一个div选择两个选项之一时显示它全职和兼职

如果可能的话，为每个计算一个不同的值当用户选择兼职时PrcA的值将变为PrcB

这是我使用的代码

<!====================================================================================>

<script language="javascript">
<!--//
function dm(amount) 
{
  string = "" + amount;
  dec = string.length - string.indexOf('.');
  if (string.indexOf('.') == -1)
  return string + '.00';
  if (dec == 1)
  return string + '00';
  if (dec == 2)
  return string + '0';
  if (dec > 3)
  return string.substring(0,string.length-dec+3);
  return string;
}

function calculate()
{
  QtyA = 0;  
  TotA = 0;  
  PrcA = 1280; 
  PrcB = 640; 

  if (document.form1.qtyA.value > "")
     { QtyA = document.form1.qtyA.value };
  document.form1.qtyA.value = eval(QtyA);  

  TotA = QtyA * PrcA;
  document.form1.totalA.value = dm(eval(TotA));

  Totamt = 
     eval(TotA) ;
  document.form1.GrandTotal.value = dm(eval(Totamt));

} 

//-->
</script>

<!====================================================================================>
<p>
<label for="acct" style="margin-right:90px;"><strong>Account Type<strong><font color=red size=3> * </font></strong></label>
<select name="acct" style="background-color:white;" class="validate[custom[serv]] select-input" id="acct" value="">

                <option value="Full Time">Full-Time</option>
                <option value="Part Time">Part-Time</option>
                <option selected="selected" value=""></option>
</select></p>
<!====================================================================================>
<script>
$(document).ready(function() {
    $("input[name$='acct']").select(function() {
        var test = $(this).val();
        $("div.desc").hide();
        $("#acct" + test).show();
    });
});
</script>

<!====================================================================================>
<p>
<table><tr><td>
<lable style="margin-right:91px;"># of Agent(s)<font color=red size=3> * </font></lable>
</td><td>
<input style="width:25px; margin-left:5px;" type="text" class="validate[custom[agnt]] text-input" name="qtyA" id="qtyA" onchange="calculate()" />
</td><td>
<div id="acctFull Time" class="desc">
 x 1280 = 
</div>
<div id="acctPart Time" class="desc" style="display:none">
 x 640 = 
</div>
</td><td>
$<input style="width:80px; margin-left:5px;" type="text" readonly="readonly"  name="totalA" id="totalA" onchange="calculate()" />
</p>
</td></tr></table>

有什么办法让我做到这一点吗？

检查此[FIDDLE]。。

在div中添加了两个类来显示金额。。这样应该更容易访问它们。。

    $(document).ready(function() {
    $("#acct").on('change', function() {
        var selVal = $(this).val();
        if (selVal == '1') { // Full Time
            $('.parttime').hide();
            $('.fulltime').show();
            $('.agent').show();
            $('.error').hide();
        }
        else if (selVal == '2') { // Part Time
            $('.parttime').show();
            $('.fulltime').hide();
            $('.agent').show();
            $('.error').hide();
        }
        else {
            $('.parttime').hide();
            $('.fulltime').hide();
            $('.agent').hide();
            $('.error').show();
        }
    });
    $('#qtyA').on('change', function() {
        var selVal = $("#acct").val();
        if (!isNaN($(this).val())) {
            var total = 0;
            if (selVal == '1') {
                total = parseInt($(this).val()) * 1280;
            }
            else if (selVal == '2') {
                total = parseInt($(this).val()) * 640;
            }
            $('#totalA').val(total.toFixed(2));
        }
        else {
            $(this).val('0');
             $('#totalA').val('0.00');
        }
    });
});​

此外，您还可以完全消除普通的javascript，使用jQuery，这应该会容易得多。。

得到了答案这就是我使用的原因

<script type="text/javascript">
$(document).ready(function(){
  $('#acct').change(function() {
    $('.box').hide();
    $('#acct' + $(this).val()).show();
 });
});
</script>

jsfiddle在这里会有很大帮助。然而，听起来你正试图：

  1. 根据下拉选择显示/隐藏内容容器，以及
  2. 根据下拉选择处理字段值

这两个问题通常可以这样解决（假设jQuery，根据您的狙击）：

<select id="time-select">
  <option value="full">Full-Time</option>
  <option value="part">Part-Time</option>
</select>
<div id="full-detail" class="detail">
  Full-time info.
</div>
<div id="part-detail" class="detail">
  Part-time info.
</div>
<input type="text" id="computed-value"/>
<script>
$(function() {
  "use strict";
  function computeValueBasedOn( opt ) {
    // Evaluate the computed value here...
    return opt ? "do" : "stuff";
  }
  $("#time-select").change(function(evt) {
    $(".detail").hide();
    $("#"+ this.value +"-detail").show();
    $("#computed-value").val( computeValueBasedOn( this.value ) );
  });
});
</script>
相关文章：