时间戳

首页 > 解决方案 > 如何获取所选选项的文本而不是值

html - 如何获取所选选项的文本而不是值

问题描述

这是我的html的正文：

  <form class="p-3">
            <div class="form-group">
                <label>Full Name</label>
                <input id="inputName" type="text" oninput="Update(this.value, 'namec')" 
  class="form-control"
                    placeholder="Robert">
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label>Contact Number</label>
                    <input id="inputNumber" type="text" oninput="Update(this.value, 
   'numberc')" class="form-control"
                        placeholder="09*********">
                </div>
                <div class="form-group col-md-6">
                    <label>Email Address</label>
                    <input id="inputEmail" type="email" oninput="Update(this.value, 'emailc')" 
    class="form-control"
                        placeholder="email@gmail.com">
                </div>
            </div>
            <div class="form-group">
                <label>Full Address</label>
                <input type="text" class="form-control" placeholder="1234 Main St"
                    oninput="Update(this.value, 'addressc')">
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label>Mode of Payment</label>
                    <select id="inputMOP" class="form-control" oninput="Update(this.value, 'mopc')">
                        <option selected>Select Payment</option>
                        <option>GCash</option>
                        <option>Bank Payment</option>
                        <option>Cash On Delivery</option>
                    </select>
                </div>
                <div class="form-group col-md-6">
                    <label>Shipping Option</label>
                    <select id="inputMOD" class="form-control" oninput="Update(this.value, 
   'modc')">
                        <option selected>Select Delivery</option>
                        <option>Standard Delivery</option>
                        <option>J&T Express</option>
                        <option>Ninjavan Express</option>
                    </select>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-8">
                    <label>Item Name</label>
                    <select id="inputItem" class="itemInput form-control" 
     oninput="Update(this.value, 'itemc')">
                        <option selected>Select Item</option>
                        <option value="155.00">Hygienix Alcohol 1L</option>
                        <option value="180.00">Protect Plus Alcohol 1 Gal</option>
                        <option value="215.00">Guardian Alcohol 1 Gal</option>
                    </select>
                </div>
                <div class="form-group col-md-4">
                    <label>Quantity</label>
                    <input id="inputQuantity" type="text" oninput="Update(this.value, 
   'quantityc')"
                        class="itemQuantity form-control" placeholder="0"><br>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-3">
                    <h6 class="mt-2">Total Price: ₱ </h6>
                </div>
                <div class="form-group col-md-3">
                    <input id="itemPrice" type="text" oninput="Update(this.value, 'pricec')" 
    class="form-control" placeholder="0" readonly>
                    
                </div>
                <div class="form-group col-md-6">
                    <button id="placeOrder" class="btn btn-primary btn-block float- 
   right">Place Order</button>
                </div>
            </div>
        </form>

jquery计算总价：

     <script>
    $(document).ready(function () {
        $('select.itemInput').on('change', function () {
            $('.itemQuantity').text($('#inputQuantity').val(0));

            $('.itemQuantity').on('change', function () {
                $('#itemPrice').val(
                    $('#inputItem').val() * $('#inputQuantity').val() + ".00"
                );

            });
        });

    });
  </script>

添加到数据库的变量声明：

     var cName = $('#inputName').val();
    var cNumber = $('#inputNumber').val();
    var cEmail = $('#inputEmail').val();
    var cAddress = $('#inputAddress').val();
    var cMop = $('#inputMop').val();
    var cMod = $('#inputMod').val();
    var cItem = $('#inputItem').find(":selected").text();
    var cQuantity = $('#inputQuantity').val();
    var cPrice = $('#itemPrice').val();

问题是我无法从#inputItem 中获取所选选项的文本。它仅从选项中获取值。另一件事，我也无法获得#itemPrice ID 下的总价格。

如何获取文本而不是#inputItem 的值？另外，#itemPrice 的价值是多少？

编辑：

终于解决了！！但是我有一个新问题，我无法使用“@gmail.com”添加数据，但是当它没有它时它可以工作。如何使用“@email.com”添加数据？

标签： htmljqueryformsweb

解决方案

使用以下脚本获得所需的结果。此外，如果您没有任何函数可以调用 onChange，请从您的输入字段中删除这些函数，从 html 中删除。他们将继续在控制台中抛出错误。

$(document).ready(function () {
  $('.itemInput').on('change', function () {

    // tempItemName stores the selected item name
    var tempItemName = $('.itemInput option:selected').text();
    totalPriceCalc();

  });

  $('.itemQuantity').on('change', function(){
    totalPriceCalc();
  });

  function totalPriceCalc () {
    var tempInputQty = $('#inputQuantity').val();
    var tempItemPrice = $('#inputItem option:selected').val();
    var tempTotalCost = (tempInputQty * tempItemPrice) + '.00';
    $('#itemPrice').val(tempTotalCost);
  }

});

推荐阅读