使用 jquery 移动从 select 选项获取“未定义”值

Question

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

<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 移动。 我还没有使用 $ ，因为我对这个主题真的很陌生。

Answer 1

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

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

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

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

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

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