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

Posted 2023-05-09

【中文标题】如何获取所选选项的文本而不是值

【英文标题】：How to get the text of selected option instead of value

【发布时间】：2021-08-26 05:36:53

【问题描述】：

这是我的 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="[e-mail]">
                </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”添加数据？

【问题讨论】：

$('#inputItem').find(":selected").text() will give 你选择的文字。您是在选择文本之前调用它吗？是否有多个 id=inputItem 元素？请edit 您的问题包括一个完整的、有效的 sn-p 来演示该问题。见minimal reproducible example。

（可能）偏离主题：请注意，您有嵌套事件。这通常不是一个好主意。您的 .itemQuantity 更改事件在您进行 itemInput 更改之后才会触发，如果您多次更改 itemInput，您将获得多个可能导致冲突的 itemQuantity 事件处理程序（在这种情况下可能不会，但运行 @ 987654330@20次还是不理想。

【参考方案1】：

使用以下脚本获得所需的结果。此外，如果您没有任何函数可以调用 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);
  

);

【讨论】：

我已经完成了这个并将它放在 var 声明之前添加到数据库中，它可以工作！！非常感谢~ 又出现了一个问题。当电子邮件包含“@​​gmail.com”时，我无法将我的数据添加到 Firebase，但在没有它时可以工作。如何使用“@gmail.com”添加我的数据？

我希望能帮上忙，但对此不太了解。可能是社区可以提供帮助！干杯