不能使用keyup函数在选项值中使用文本

时间:2013-03-09 16:11:30

标签: javascript jquery

我希望能够捕获name = formdesc一个选项值,它是文本而不是数字,但我需要数字来计算下面的价格点。有没有办法改变它,以便它正确计算(在JS下面)并将选项值捕获为仅文本而不是数字(HTML)?

我需要的样本:

    <select id="apparelType" name="formdesc">
    <option selected="selected" value="na">Select</option>
    <option value="tshirt">T-Shirt</option> 

但是打破了我的JS!

HTML :(我现在拥有的)

<select id="apparelType" name="formdesc">
    <option selected="selected" value="na">Select</option>
    <option value="0">T-Shirt</option>
    <option value="1">Shorts</option>
    <option value="2">Hat</option>
    <option value="3">Bag</option>
</select>
<input id="numb" type="number" name="formterm">
<id="tot"><Total: $0.00&nbsp;>

JS:

<script type="text/javascript">// <![CDATA[
// 
$(document).ready(function(){
                          $('#numb').keyup(function(){
                                                        var appVal = new Array();
                                                        appVal[0] = 15; <--[tshirt]
                                                        appVal[1] = 20;
                                                        appVal[2] = 25;
                                                        appVal[3] = 30;
                                                        var cost = 0;
                                                        var fmapVal = $('#apparelType').val();
                                                        if (fmapVal == 'na')
                                                        { alert ('Please select an apparel type.');
                                                        }
                                                        else
                                                        {
                                                            cost = appVal[fmapVal];
                                                        };
                                                        //alert(cost);
                                                        var getNumb = $('#numb').val();
                                                        var baseTotal = cost * getNumb;
                                                        var getTax = baseTotal * .06;
                                                        var getTotal = baseTotal + getTax;
                                               $('#tot').html('Total: $' +  getTotal.toFixed(2));
                                                        $('#formbal').val(getTotal.toFixed(2));
                                         });
           });
  // ]]></script>

3 个答案:

答案 0 :(得分:0)

如果您需要选择选项名称,则val不是您需要的。相反,试试这个:

var optionName = $('#apparelType').find('option:selected').text();

希望我理解正确(尽管很难)。

答案 1 :(得分:0)

<form>
<select id="apparelType" name="apparelType">
    <option selected="selected" value="na">Select</option>
    <option value="0">T-Shirt</option>
    <option value="1">Shorts</option>
    <option value="2">Hat</option>
    <option value="3">Bag</option>
</select>

<label for="numb">Total: <span>$</span></label>
<input id="numb" type="number" name="formterm" value="0.00" >
<input id="pretaxTotal" type="hidden" value="0.00" >
<br>
<textarea id="formdesc" name="formdesc" rows="12" cols="20"></textarea>
</form>


<script type="text/javascript">

  $('#apparelType').change(function(){
    var apparelType = $('#apparelType');
    var fmapVal = apparelType.val();

    if (fmapVal == 'na') {
      alert('Please select an apparel type.');
    } else {
      var appVal = [ 15, 20, 25, 30 ];
      var description = apparelType.find('option:selected').text();
      var cost = appVal[fmapVal];

      var pretaxTotal = parseInt($('#pretaxTotal').val());
      var subtotal = pretaxTotal + cost;
      var updatedTotal = ( subtotal * 1.06 ).toFixed(2);

      $('#pretaxTotal').val(subtotal);
      $('#numb').val(updatedTotal);

      $('#formdesc').append(description + '\n');
    }
  });

  /* The following code is cosmetic. Makes dollar sign appear to be inside the input field */
  $('label > span').css('position','relative').css('left','20px').css('font-size','80%');
  $('input[type=number]').css('padding-left','15px');

</script>

答案 2 :(得分:-1)

可以使用带有case语句的函数来从传递的文本字符串中获取成本:

function getVal(value) {
    switch(value) {
        case 'tshirt':
            cost = 15;
            break;
        case 'shorts':
            cost = 15;
            break;
        case 'hat':
            cost = 15;
            break;
        case 'bag':
            cost = 15;
            break;
        default:
            cost = 'Please select an option...';
            break;
    }
    return cost;
}

然后在if语句中使用cost = getVal(fmapVal);