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

Posted

技术标签:

【中文标题】如何获取所选选项的文本而不是值【英文标题】: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="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”添加数据?

【问题讨论】:

$('#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”添加我的数据? 我希望能帮上忙,但对此不太了解。可能是社区可以提供帮助!干杯

以上是关于如何获取所选选项的文本而不是值的主要内容,如果未能解决你的问题,请参考以下文章

使用 jQuery 获取所选选项的文本 [重复]

select2 jQuery插件:获取所选选项的文本值? [复制]

jQuery Chosen:如何从多项选择中获取所选选项文本的数组

在Jquery中获取所选选项的文本值[重复]

如何获取所选列表视图项中的id以打开上下文菜单并通过下一个活动来实现目标。

如何根据所选列而不是Oracle中表的所有列获取不同的行