根据选择下拉选项

时间：2015-06-22 21:00:25

标签： jquery css

我创建了一个小表单，根据每个人的实例或整个群组计算他们想要花费的人数：

https://jsfiddle.net/g7zz6/661/ 

Men: <input type="text" class="number men-value" value="1"><br>
Women: <input type="text" class="number women-value" value="1"><br>
Total Spend: <input type="text" class="number amount-value" placeholder="Amount" name="amount">
<select>
<option>per person</option>
<option>group total</option>
</select>

<div class="group-total-spend">
$<span class="total-amount-group"></span> Group Total<br>
$<span class="total-amount-per-person"></span> Per Person
</div>

我遇到的一些问题需要补充：

当选项＆＃34;每个人＆＃34;被选中，我只需要＆＃34; Group Total＆＃34;可见＆＃34;当＆＃34; group total＆＃34;被选中，我只需要＃34;每个人＆＃34;可见。

另一个问题是，在填写所有3个字段之前，我不希望计算可见。我现在的方法是将男性和女性字段的默认值设置为1 - 因为如果它们的值均为0，则得到值为＃34; NaN＆＃34;。很高兴停止允许0同时在男性和女性领域。现在我所拥有的是容器＆＃34; .group-total-spend＆＃34;输入任何值后立即显示。如果我能想出一种方法来组合所有3以使其可见，那么这将变得过时。

$('input[name=amount]').keyup(function(){
if($(this).val().length)
$('.group-total-spend').show();
    else
    $('.group-total-spend').hide();
});

提前感谢任何可以伸出援助之手的人。我知道这可能很简单，但我只是进入jQuery并随时学习。

5 个答案:

答案 0 :(得分：1)

检查更新的小提琴 - https://jsfiddle.net/g7zz6/669/。

HTML 

Men
<input type="text" class="number men-value" value="1">
<br>Women
<input type="text" class="number women-value" value="1">
<br>Total Spend
<input type="text" class="number amount-value" placeholder="Amount" name="amount">
<select id="categoryselect">
    <option>per person</option>
    <option>group total</option>
</select>
<div class="group-total-spend">
    <span class="total-amount-group">
        $<label></label> Group Total</span>
    <br/>
    <span class="total-amount-per-person">
        $<label></label> Per Person</span>
</div>

JS 

      /* Allow Numbers Only */
jQuery('.number').keyup(function () {
    this.value = this.value.replace(/[^0-9\.]/g, '');
});

/* Show/Hide Total */
$('input[name=amount]').keyup(function () {
    if ($(this).val().length > 0) $('.group-total-spend').show();
    else $('.group-total-spend').hide();
});

/* Calculate Total */
$(document).ready(function () {
    $("input.number").keyup(function () {
        calculate();
    });
});
/* End Group Spend */

function calculate() {
    var val1 = parseInt($(".men-value").val(), 10);
    var val2 = parseInt($(".women-value").val(), 10);
    var group = val1 + val2;
    var val3 = parseInt($(".amount-value").val(), 10);
    var selectedIndex = $("#categoryselect").prop('selectedIndex');
    var tresult = group * val3;
    var ppresult = tresult / group;
    if (selectedIndex === 1) {
        tresult = val3;
        ppresult = val3 / group;
    }


    $('.total-amount-group').find('label').text(tresult);
    $('.total-amount-per-person').find('label').text(ppresult);
    if ($(".men-value").val().length > 0 && $(".women-value").val().length > 0) {
        if (selectedIndex === 0) {
            $('.total-amount-group').show();
            $('.total-amount-per-person').hide();
        } else {
            $('.total-amount-group').hide();
            $('.total-amount-per-person').show();
        }
    } else {
        $('.total-amount-group').hide();
        $('.total-amount-per-person').hide();
    }
}

$("#categoryselect").change(function () {
    calculate();
});

答案 1 :(得分：1)

请检查这个JSFiddle我更新了代码：https://jsfiddle.net/g7zz6/664/希望它有所帮助：）

HTML：

Men <input type="text" class="number men-value" value="1"><br>
Women <input type="text" class="number women-value" value="1"><br>
Total Spend <input type="text" class="number amount-value" placeholder="Amount" name="amount">
<select id="option">
<option value="perPerson">per person</option>
<option value="groupTotal">group total</option>
</select>

<div class="group-total-spend">
    <p id="groupTotal">$<span class="total-amount-group"></span> Group Total</p>
    <p id="perPerson">$<span class="total-amount-per-person"></span> Per Person</p>
</div>

JS：

/* Start Group Spend */

/* Allow Numbers Only */
jQuery('.number').keyup(function () { 
    this.value = this.value.replace(/[^0-9\.]/g,'');
});

/* Calculate Total */
$(document).ready(function(){
    $("input.number").keyup(function(){
        calcTotal();                                                                  
    });

    $("select#option").change(function() {
        calcTotal();
    });
});

function calcTotal() {

    $('p#perPerson').hide();
    $('p#groupTotal').hide();

    var val1 = parseInt($(".men-value").val(), 10);
    var val2 = parseInt($(".women-value").val(), 10);        
    var val3 = parseInt($(".amount-value").val(), 10);        

    if (isNaN(val1) || isNaN(val2) || isNaN(val3)) {              
        return false;
    }

    var group = val1+val2         
    var tresult = group * val3
    var ppresult = tresult / group                             
    var option = $("select#option").val();

    switch(option) {
        case "perPerson":
            $('span.total-amount-per-person').text(ppresult);
            $("p#perPerson").show();
            break;
        case "groupTotal":
            $('span.total-amount-group').text(tresult);
            $("p#groupTotal").show();                  
            break;
    }
}
/* End Group Spend */

CSS：

.group-total-spend p {display:none;margin-top:10px;border-top:1px solid #000;padding-top:10px;width:50%;}

答案 2 :(得分：0)

在显示结果之前检查字段的值。

if(($(".men-value").val() != "") && ($(".women-value").val() != "") && ($(".amount-value").val() !="")){
  // calculation here
}

我已更新了您的fiddle。

答案 3 :(得分：0)

只有当所有三个输入都已满时才能使div显示我使用一个简单的计数器

var filled=0;
$('input').each(function(){
   if($(this).val()!='')
      filled++;
});
if(filled==3){
   $('.group-total-spend').show();
   $('.total-amount-group').text(tresult);
   $('.total-amount-per-person').text(ppresult);
}else{
   $('.group-total-spend').hide();            
}

然后选择只有一个切换

$('select').on('change',function(){
    if($(this).val()=='per person'){
        $('#group').hide();
        $('#person').show();
    }else{
        $('#group').show();
        $('#person').hide();
    }
});

fiddle

答案 4 :(得分：0)

DEMO

这应该可以做到 - 请注意您的标记有微小的变化：

$(function() {
    $('input.number,select').on('keypress change', function(e) {
        if( $(this).is('.number') && e.which && (e.which < 48 || e.which > 57) ) {
            console.log( e.which );
            e.preventDefault();
        }
        var filled = $('input.number').filter(function() {
            return this.value.trim().length > 0;
        });
        $('.group-total-spend')[filled.length === 3 ? 'show' : 'hide']();
        if( filled.length === 3 ) {
            var val1 = parseInt($(".men-value").val(), 10);
            var val2 = parseInt($(".women-value").val(), 10);
            var group = val1+val2
            var val3 = parseInt($(".amount-value").val(), 10);
            var tresult = group * val3
            var ppresult = tresult / group
            $('.total-amount-group').text(tresult);
            $('.total-amount-per-person').text(ppresult);

            var sel = $('select').val();console.log( sel );
            $('span.total')[ sel == 'per person' ? 'show' : 'hide' ]();
            $('span.person')[ sel == 'group total' ? 'show' : 'hide' ]();
        }
    });
});
相关问题
最新问题