使用 jquery mobile 从选择选项中获取“未定义”值答案

【问题标题】：Getting 'undefined' value from select options using jquery mobile使用 jquery mobile 从选择选项中获取“未定义”值
【发布时间】：2022-01-03 15:44:28
【问题描述】：

我试图从列表中选择的任何选项中获取选定的值。但是，它提到了“未定义”

<fieldset data-role="controlgroup">
                    <legend>Select Pizza Flavor </legend>
                    <select name="flavorlist" id="flavorlist" onclick="total()">
                        <option value= "">-Select Flavor-</option>
                        <option value="6">Cheezy Chicken (RM6)</option>
                        <option value="6">Spicy Chicken (RM6)</option>
                        <option value="5">Hawaii (RM5)</option>
                        <option value="6">Peperroni (RM6)</option>
                        <option value="5">Seafood (RM5)</option>
                        <option value="5">Beef (RM5)</option>
                    </select>
                </fieldset>

javascript

function flavorprice()
{
    var flavorprice = 0
    
    var list = document.getElementsByName("flavorlist");

    flavorprice = list.value;
    
    return flavorprice;
}

我试过了

function flavorprice()
{
    var flavorprice = 0
    
    var list = document.getElementsByName("flavorlist");

    flavorprice = list.options[list.selectedIndex].value;
    
    return flavorprice;
}

仍然没有价值。如何解决这个问题？我正在学习jquery mobile。我还没有使用 $ ，因为我对这个主题真的很陌生。

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

问题是因为getElementsByName() 返回的是 NodeList，而不是 Element。因此value 属性未定义。

要解决直接问题，您可以改为通过 id 选择元素，因为这在 DOM 中应该是唯一的，并且只会返回一个元素：

function flavorprice() {
  return document.getElementById("flavorlist").value || 0;
}

但是请注意，当您使用 jQuery mobile 时，您可以使用 jQuery 方法来实现相同的目标：

function flavorprice() {
  return $('#flavorlist').val() || 0;
}

// ES6 version of the above:
let flavorprice = () => $('#flavorlist').val() || 0;

【讨论】：