javascript - 无法通过 keyup 功能在选项值中使用文本

Question

我希望能够捕获到 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>

Answer 1

如果您需要使用选项名称，那么val这不是您所需要的。而是试试这个：

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

希望我正确地理解了你（虽然这很难）。

Answer 2

<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>

Answer 3

可以使用带有 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);.